遮罩層是一種常用的前端技術(shù)，常常用來實現(xiàn)一些交互效果或者方便用戶操作。下面我們來介紹一下如何通過 CSS 來制作遮罩層。

首先，我們需要在 HTML 中創(chuàng)建一個被覆蓋的元素。例如，我們可以創(chuàng)建一個 div 元素，并給它添加一個 class 名稱mask。

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

接下來，我們需要為這個mask元素設(shè)置基本樣式。我們可以設(shè)置它的寬高、顏色、透明度等屬性。同時，我們也要將這個元素的 position 屬性設(shè)置為 absolute，這樣遮罩層才能夠覆蓋在其他元素之上。

.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}

上述代碼中，我們將mask的寬高設(shè)置為 100%，這樣它就能夠覆蓋整個頁面。我們還將它的背景顏色設(shè)置為黑色，并且將透明度設(shè)置為 0.5，這樣遮罩層就不會完全覆蓋被它覆蓋的元素。

如果我們希望遮罩層只覆蓋某個特定元素，而不是整個頁面，我們可以將這個元素的 position 屬性設(shè)置為 relative，然后將mask元素插入到這個元素中。

<div class="parent">
<div class="child"></div>
<div class="mask"></div>
</div>

.parent {
position: relative;
}
.child {
width: 200px;
height: 200px;
background-color: #fff;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}

上述代碼中，我們將parent的 position 屬性設(shè)置為 relative，然后將mask元素插入到這個元素中。因此，mask就只會覆蓋parent元素，而不會影響其他元素。

最后，我們可以通過 JS 來控制遮罩層的顯示和隱藏。例如，我們可以添加一個點擊事件，當(dāng)用戶點擊某個按鈕時，遮罩層就會顯示出來。

<button id="btn">顯示遮罩層</button>
<div class="mask" id="mask"></div>

var btn = document.getElementById('btn');
var mask = document.getElementById('mask');
btn.addEventListener('click', function() {
mask.style.display = 'block';
});

上述代碼中，我們首先獲取了按鈕和遮罩層的元素。然后，當(dāng)用戶點擊按鈕時，我們通過設(shè)置mask的 style 屬性，將它的 display 屬性設(shè)置為 block，從而使其顯示出來。

通過上述步驟，我們就可以輕松地制作出一個遮罩層，并實現(xiàn)一些有趣的交互效果。希望這篇文章對你有所幫助！