CSS作為網頁開發的重要組成部分，經常會用到遮罩層的效果，實現頁面視覺上的突出和強調。那么，CSS怎樣設置遮罩層呢？下面就來簡單介紹一下。
首先，要清楚遮罩層的定義。遮罩層是指在頁面元素上添加一個半透明的罩子，使得頁面元素之間的重疊效果。”遮”住頁面上的元素。
接下來，我們來看如何在CSS中實現遮罩層的效果。
首先，我們可以通過偽元素:before或:after來實現遮罩層效果。

/* 實現遮罩層效果 */
.box:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 遮罩層顏色 */
z-index: 1;
}

在上面的代碼中，我們使用:before偽元素，給.box添加了一個遮罩層。位置定位為絕對定位，并且覆蓋整個頁面。設定了背景顏色，并將z-index設為1，使其顯示在頁面上方。
其次，我們可以使用CSS3中的opacity屬性來實現透明度的效果，從而實現遮罩層效果。

/* 實現遮罩層效果 */
.box {
position: relative;
}
.box:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.5; /* 透明度 */
background-color: #000000; /* 遮罩層顏色 */
z-index: 1;
}

以上代碼中，我們使用了:after偽元素，給.box添加了一個遮罩層。通過使用opacity屬性，來調整遮罩層的透明度。通過設置遮罩層的顏色和z-index，來實現遮罩層的效果。
最后，需要注意的是，在設置遮罩層效果時，要靈活運用z-index屬性，使得遮罩層處于正確的位置，并能正確的遮蓋頁面元素。同時，遮罩層的透明度需要根據實際情況進行調整，使得頁面美觀而不失功能。