CSS 遮罩層是一種很實用的技術，常常被用于彈出對話框，在浮出層之上加一層半透明的遮罩，防止用戶誤操作或者保護用戶隱私，同時還可以提高頁面的美觀性。接下來我們就通過代碼實現(xiàn)一下 CSS 遮罩層。

.mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
z-index: 999;
display: none;
}

首先我們定義一個類名為 mask 的元素，設置其定位方式為固定定位（position:fixed），讓它覆蓋整個頁面（top:0; left:0; width:100%; height:100%），背景顏色為黑色并設置透明度為 0.8（background-color:rgba(0,0,0,0.8)）。因為我們希望這個遮罩層在浮出層之上，所以設置它的 z-index 值為 999。最后將它的顯示方式設置為不顯示（display:none）。

.pop{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1000;
background-color: #fff;
padding: 20px;
display: none;
}

接著我們再定義另一個類名為 pop 的元素，同樣設置其定位方式為固定定位（position:fixed）。由于我們希望該元素居中顯示，所以將它的 top 和 left 屬性都設置為 50%，然后再利用 transform 屬性，將它向左和向上移動自身寬高的一半（transform:translate(-50%,-50%)）。同樣還需要設置 z-index 值，確保它在遮罩層之上（z-index:1000）。最后將它的背景顏色設置為白色（background-color:#fff），并添加一些 padding，使其內容不緊貼邊緣。同樣將其初始的顯示方式設置為不顯示（display:none）。

document.getElementById("btn").addEventListener("click",function(){
document.querySelector(".mask").style.display = "block";
document.querySelector(".pop").style.display = "block";
});

最后我們需要在點擊某個按鈕時，讓遮罩層和浮出層同時出現(xiàn)。這里我們可以利用 JavaScript，在點擊按鈕時，將遮罩層和浮出層的 display 屬性設置為 block。

代碼片段：

<button id="btn">彈出浮出層</button>
<div class="mask"></div>
<div class="pop">
<p>這里是浮出層的內容，可以放置一些表單、圖片等等。</p>
</div>

最后，添加事件監(jiān)聽:

<script>
document.getElementById("btn").addEventListener("click",function(){
document.querySelector(".mask").style.display = "block";
document.querySelector(".pop").style.display = "block";
});
</script>

這就是 CSS 遮罩層的實現(xiàn)方法。