CSS中添加遮罩層可以讓網頁效果更加豐富和炫酷，同時也能提高用戶體驗。下面我們來詳細介紹如何添加遮罩層。

首先，我們需要創建一個遮罩層的樣式。可以使用如下代碼：

.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

上面的代碼中，我們使用了一個類名為“mask”的樣式，設置其屬性為fixed表示該元素跟隨整個網頁滾動；同時設置其一些位置和顏色屬性，可以替換其中的背景顏色代碼。

接下來，我們需要在需要遮罩的元素上添加該遮罩層。可以使用如下代碼：

<div class="mask"></div>
<div class="content">
...
</div>

上面的代碼中，我們給需要遮罩的元素（以這里示例中的div為例）外層包裹了一個類名為“mask”的元素，以覆蓋整個元素，并達到遮罩效果。同時，我們在該遮罩元素下方嵌套了一個需要遮罩的元素，這里使用的類名為“content”，你可以替換成自己需要的元素類名。

通過上述步驟，我們就成功添加了一個簡單的遮罩層！接下來，你可以通過樣式屬性的變化以及一些js效果，來制作更加豐富的遮罩效果。