CSS遮蔽層是一種常見的設計技巧，可以通過設置一個半透明的層覆蓋在網頁上，使得網頁內容變暗，并且在遮蔽層上添加一些其他的元素。

實現遮蔽層可以使用CSS的偽元素::after或者::before，也可以使用添加一個額外的div層。

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);/*設置為半透明黑色*/
z-index: 999; /*將層的z-index設置為較高的值，確保在頁面上方*/
}

在HTML中添加遮蔽層代碼如下：

<div class="overlay"></div>

需要注意的是，遮蔽層的position屬性必須設置為fixed，否則在頁面滾動的時候無法保持覆蓋整個窗口。

除了添加一個半透明的層，還可以在這個層上面添加一些其他的元素，比如提示框、登錄框等。這些元素的z-index屬性要設置得比遮蔽層的z-index要高，否則會被遮蔽層覆蓋。

.overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
}
.dialog{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
z-index: 1000;
}

在HTML中添加遮蔽層和登錄框代碼如下：

<div class="overlay"></div>
<div class="dialog">
<h3>登錄</h3>
<form>
<label>用戶名</label>
<input type="text"><br><br>
<label>密碼</label>
<input type="password"><br><br>
<button>登錄</button>
</form>
</div>