CSS中實現蒙版效果非常簡單，我們只需要使用CSS中的偽元素和透明度屬性即可。

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

上面的代碼中，我們首先為容器加上position: relative屬性，這是為了讓偽元素定位到這個容器上面。然后我們使用偽元素::before來生成一個和容器大小一樣的透明黑色層，這個層的透明度設置為0.5，這樣就能看到下面的內容同時也有一定程度的遮罩。

如果想要蒙版完全顯示在需要遮罩的元素之上，可以為其設置更高的z-index值。

.mask {
position: relative;
z-index: 999;
}
.mask::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
background-color: rgba(0,0,0,0.5);
z-index: -1;
}

上面的代碼中，我們為容器和偽元素同時設置了z-index值，容器的值更高，可以將偽元素完全遮擋在上面。

通過這種方式，我們可以輕松實現頁面中的各種蒙版效果，增加頁面的層次感和美觀性。