[分享]css3怎么同时写两个遮罩

CSS3中，我们可以通过使用伪元素和多重背景图片来同时写两个遮罩。

 .box {
        position: relative;
        width: 300px;
        height: 300px;
        background: url("background.jpg") center center no-repeat;
        background-size: cover;
    }

    .box:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .box:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("mask.png") center center no-repeat;
        background-size: cover;
    } 

以上代码中，我们先给容器.box设置了一个背景图片，并且让它居中显示并覆盖整个容器。接下来，我们通过使用伪元素:before和:after来分别设置了两个遮罩。

伪元素:before的样式中，我们使用了position:absolute将它定位在了容器.box的左上角，并且给它设置了一个半透明黑色背景色来实现一个遮罩的效果。

伪元素:after的样式中，我们同样使用了position:absolute来定位它的位置，并且使用了一张遮罩图片来实现第二个遮罩的效果，同时也将这张图片居中并覆盖整个容器。

在实际开发中，我们可以根据需要来调整其中的样式属性，比如改变遮罩的颜色、透明度、使用不同的图片等等，从而实现不同的遮罩效果。