css简单制作蒙版层效果

蒙版层的制作

1.在需要添加蒙版效果的盒子里面放一个空的div盒子。如下：.mask

2.对其进行css修饰并设置其背景亮度效果。如下：

.mask{
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);//0.1表示你要调整的亮度0~1之间
 }

3.使用子绝父相，并将其隐藏。如下：

	position: absolute;
    top: 0;
    left: 0;
    display: none;

4.鼠标hover上去显示：

 .box:hover .mask{
       display: block;
}

全部代码如下：