css写遮罩 |htmlcss文字居中

第一种方式：使用box-shadow属性实现遮罩效果

.mask{
width:100%;
height:100%;
background-color:rgba(0,0,0,0.4);
box-shadow:0 0 0 9999px rgba(0,0,0,0.4);
}

box-shadow属性实现遮罩效果的原理在于，将遮罩层的box-shadow的扩散大小设置为以大的值，超出遮罩层的尺寸，这样就能达到遮罩的效果。其中，rgba(0,0,0,0.4)为黑色半透明的背景颜色。

第二种方式：使用伪元素实现遮罩效果

.mask{
position:relative;
}
.mask:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.4);
z-index:1;
}
.mask:after{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:2;
/*添加遮罩样式*/
}

这种方式的原理是通过伪元素:before和:after来创建遮罩层。其中:before层放置背景颜色，:after层添加需要的样式，z-index属性值越大，层数越高。

以上就是两种常见的CSS遮罩实现方式，可以根据实际需求来选择使用哪一种方式。希望本文对大家的Web开发有所帮助。