遮罩層是一種常見的技巧，可以高效地達到不同的視覺效果。

//HTML結構
//CSS樣式
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: #000;
z-index: 1;
}
.content {
position: relative;
z-index: 2;
}

以上是一種基本實現方式，通過絕對定位把遮罩層設為全屏且不透明，再通過z-index使內容層在遮罩層之上。

可以根據實際需求調整遮罩層的顏色、透明度等屬性，也可以通過添加CSS過渡效果、動畫等使遮罩層更加生動有趣。

.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: #fff;
transition: all 0.2s ease-in-out;
}
.content:hover .mask {
opacity: 0.5;
}

以上代碼演示了一個簡單的鼠標懸停效果，當鼠標懸停在內容層上時，遮罩層的透明度從0到0.5發生漸變，通過CSS過渡效果實現平滑過渡。

CSS遮罩層還可以適用于各種需求場景，如模態框、下拉菜單、圖片放大等，都可以通過適當的調整實現。希望本文能夠對大家有所幫助。