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

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

接下來，我們在這個元素之前添加一個 ::before 偽元素，并為這個偽元素設置一些樣式。我們可以為這個偽元素設置一個實心的背景顏色，比如：

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

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

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