HTML和CSS是網頁設計中不可或缺的兩個組成部分，隨著技術的不斷發展，CSS遮罩越來越受到前端開發人員的關注，遮罩可以實現圖片增加、文字覆蓋和模糊等效果。

在CSS中，遮罩部分通常使用偽元素（:before或:after）來實現。下面的代碼可以創建一個黑色遮罩效果:

.overlay {
position: relative;
}
.overlay::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

接下來，我們可以在遮罩上增加圖片，同時保留遮罩效果，在HTML中增加一個img標簽，并將其放置在遮罩內部：

我們使用CSS將圖片和遮罩層一起定位，并使用z-index屬性將遮罩放置在圖片上方：

.overlay {
position: relative;
}
.overlay::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.overlay img {
position: relative;
z-index: 2;
}
.overlay .overlay-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}

現在，我們已經成功在遮罩上增加了一張圖片。使用CSS遮罩可以為網頁添加一些精美的效果，實現視覺上的感官沖擊，給用戶帶來更好的體驗。