在網頁設計中，為圖片添加遮罩是一個重要的技巧，可以提升圖片的美觀度，更好地融入網頁設計風格。在CSS中，通過偽元素:before和:after可以輕松地為圖片添加遮罩效果。下面將詳細介紹如何使用CSS為圖片添加遮罩。 首先，我們需要在HTML中引入圖片，并通過CSS對其進行樣式設置：

<div class="image-container">
<img src="image.jpg" alt="圖片">
</div>

.image-container {
position: relative;
}
.image-container img {
width: 100%;
height: auto;
}

接下來，我們通過:before或:after創建偽元素，并為其設置樣式。例如，下面的代碼將為偽元素添加一個灰色的遮罩：

.image-container:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}

在上述代碼中，共設置了七個屬性： 1. content: ""; - 創建偽元素 2. position: absolute; - 設置偽元素的定位方式為絕對定位 3. top: 0; - 將偽元素定位到圖片容器的頂部 4. left: 0; - 將偽元素定位到圖片容器的左部 5. width: 100%; - 將偽元素的寬度設置為圖片容器的寬度 6. height: 100%; - 將偽元素的高度設置為圖片容器的高度 7. background-color: rgba(0,0,0,0.5); - 將偽元素的背景顏色設置為黑色，并設置透明度為0.5 通過設置z-index: 1，我們確保偽元素在圖片上層顯示。 最后，我們需要通過為圖片容器設置z-index:2，確保圖片在遮罩上層顯示。 下面是完整的代碼：

<div class="image-container">
<img src="image.jpg" alt="圖片">
</div>

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

以上就是使用CSS為圖片添加遮罩的方法。我們可以根據需要自由設置遮罩的顏色、透明度等屬性，讓圖片更好地融入網頁設計中。