CSS3是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的一部分。它能夠?qū)崿F(xiàn)各種炫酷的效果，其中之一就是給圖片添加遮罩層。讓我們來(lái)學(xué)習(xí)一下如何使用CSS3給圖片添加遮罩層。

.img-container {
position: relative;
display: inline-block;
}
.img-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.img-container:hover .img-mask {
opacity: 1;
}

首先，我們需要將圖片和遮罩層容器包裹在一個(gè)父容器中，并且這個(gè)父容器的定位需要是相對(duì)的。這樣我們就可以使用絕對(duì)定位來(lái)放置遮罩層。

遮罩層容器需要設(shè)置寬度和高度都為100％，并且使用rgba顏色來(lái)設(shè)置半透明的背景顏色。我們還可以使用transition屬性來(lái)設(shè)置透明度的變化。

在默認(rèn)情況下，遮罩層的透明度為0，當(dāng)鼠標(biāo)懸停在圖片上時(shí)，通過(guò):hover偽類(lèi)將其透明度調(diào)整為1。

現(xiàn)在，讓我們來(lái)看一個(gè)完整的例子。

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

在這個(gè)例子中，我們給圖片添加了一個(gè)遮罩層。當(dāng)鼠標(biāo)懸停在圖片上時(shí)，遮罩層會(huì)變得半透明。

CSS3遮罩層非常實(shí)用，可以實(shí)現(xiàn)許多炫酷的效果。通過(guò)使用遮罩層，我們可以向網(wǎng)站添加更多的視覺(jué)元素，使其具有更好的可視性和吸引力。