CSS 中添加蒙版效果是一個(gè)經(jīng)常應(yīng)用的技巧，它可以讓圖片更加鮮明、突出，同時(shí)也可以增加網(wǎng)頁(yè)的藝術(shù)性

接下來(lái)我們將學(xué)會(huì)如何通過(guò) CSS 來(lái)為圖片添加蒙版：

.mask-img {
position: relative;
display: inline-block;
}
.mask-img::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.mask-img:hover::before {
opacity: 1;
}

首先，我們?cè)?HTML 代碼中插入圖片元素，并通過(guò) CSS 設(shè)定圖片的樣式。我們?cè)谶@里為 `.mask-img` 設(shè)定了 `position: relative;` 的屬性，可以讓圖片在后續(xù)的蒙版效果中作為容器元素。

接下來(lái)我們通過(guò) `::before` 偽元素來(lái)創(chuàng)建一個(gè)覆蓋整個(gè)容器元素的蒙版。我們?yōu)樵搨卧卦O(shè)置了一些關(guān)鍵屬性，比如 `position: absolute;` 可以讓該元素脫離普通文檔流，`background-color: rgba(0, 0, 0, 0.5);` 可以設(shè)定蒙版的背景顏色和透明度。

在下一步中，我們將通過(guò) `opacity` 屬性來(lái)控制蒙版的透明度，以達(dá)到蒙版出現(xiàn)和消失的效果。我們通過(guò) `transition` 屬性來(lái)設(shè)定蒙版的過(guò)渡效果，讓它看起來(lái)更加自然連貫。

最后，我們?cè)?CSS 中為 `.mask-img` 元素添加了偽類 `:hover`，當(dāng)用戶在瀏覽器中懸停在圖片上時(shí)，即可觸發(fā)蒙版效果的出現(xiàn)，完成了我們本次的圖片蒙版效果實(shí)現(xiàn)。