在制作網(wǎng)頁時(shí)，經(jīng)常需要使用到圖片，而有時(shí)候我們需要為圖片添加一些特效，比如為圖片加上遮罩效果。在 CSS 中，我們可以通過一些簡(jiǎn)單的代碼來實(shí)現(xiàn)這個(gè)效果。 首先，我們需要在HTML文檔中插入一張圖片：

接下來，我們可以使用CSS中的 ::before 偽元素來實(shí)現(xiàn)圖片遮罩效果。首先，我們需要為圖片所在的元素設(shè)置一個(gè) position 屬性的值，比如設(shè)置為 relative 或者 absolute。

接下來，我們?cè)谶@個(gè)元素之前添加一個(gè) ::before 偽元素，并為這個(gè)偽元素設(shè)置一些樣式。我們可以為這個(gè)偽元素設(shè)置一個(gè)實(shí)心的背景顏色，比如：

::before {
content: "";
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

在上面的代碼中，我們?cè)O(shè)置了 ::before 偽元素的 content 屬性為空，這是因?yàn)檫@個(gè)偽元素只是一個(gè)用來裝飾的元素，不需要顯示任何內(nèi)容。我們?yōu)檫@個(gè)偽元素設(shè)置了一個(gè)背景顏色為半透明黑色，通過調(diào)整 rgba 函數(shù)中最后一個(gè)參數(shù)的值，我們可以調(diào)整遮罩層的透明度。我們將這個(gè)偽元素的 position 屬性設(shè)置為 absolute，以保證它可以覆蓋在圖片之上，并將它的 top、left、right 和 bottom 四個(gè)邊界屬性都設(shè)置為 0，以讓它覆蓋整個(gè)圖片。 最后，我們需要為圖片設(shè)置一個(gè) zIndex 值，以確保圖片可以覆蓋在遮罩層之上。我們可以將它的 zIndex 值設(shè)置為一個(gè)比遮罩層的 zIndex 值大的值。

::before {
content: "";
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
img {
position: relative;
z-index: 2;
}

通過上面的代碼，我們就可以為圖片添加一個(gè)簡(jiǎn)單的遮罩層了。如果我們想要改變遮罩層的顏色或透明度，只需要調(diào)整里面的樣式即可。 總而言之，通過使用CSS中的 ::before 偽元素和一些簡(jiǎn)單的樣式，我們可以輕易地為圖片添加一個(gè)遮罩效果，讓圖片在視覺上更具有吸引力。