html添加遮罩效果

什么是遮罩效果

遮罩效果是在网页中对一个背景进行一层覆盖，从而达到扩大视觉效果的目的。

使用CSS实现遮罩效果

.mask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .8);
    z-index: 100;
}

以上代码中，我们使用了CSS的样式定义，选取了一个mask类来实现遮罩效果。通过position属性的设置将遮罩层固定在页面上，同时保证z-index的值高于其他的层级，达到覆盖其他元素的效果。background-color属性是设置遮罩层的颜色，这里使用了rgba来设置半透明效果。

在元素上添加遮罩效果

  

  
这是主要内容区域

以上代码中，我们在wrapper元素中添加了一个遮罩层mask，然后再将需要展示的内容包裹在wrapper中。这样做的好处在于，我们可以随意调整内容区域与遮罩层的位置，从而实现不同的遮罩效果。

使用Javascript控制遮罩层的显隐

function showMask(){
    document.querySelector('.mask').style.display = 'block';
}

function hideMask(){
    document.querySelector('.mask').style.display = 'none';
}

以上代码中，我们使用了Javascript来实现控制遮罩层的显隐。通过querySelector方法来选取页面中的对应元素，并操作其style.display属性，从而实现遮罩层的显隐。

总体来说，实现网页中遮罩效果最常用的方式就是使用CSS来设置样式。通过对CSS不同属性的判断和设置，我们可以灵活地创建不同形态的遮罩效果。同时，我们建议在元素上添加遮罩效果，使得元素与遮罩层之间的关系更加清晰。如果需要控制遮罩层的显隐，可以通过Javascript来实现。