鼠標(biāo)經(jīng)過圖片加蒙版是一種常見的網(wǎng)頁交互方式。通過在圖片上疊加一層半透明的顏色或圖案，能夠增強(qiáng)圖片的視覺效果，并引導(dǎo)用戶點(diǎn)擊。下面讓我們來看一下如何使用CSS實(shí)現(xiàn)這一功能。

/*CSS代碼*/
.mask{
position:relative;
}
.mask img{
display:block;
}
.mask:after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
opacity:0;
transition:opacity 0.3s ease;
}
.mask:hover:after{
opacity:1;
}

以上代碼中，我們首先給容器元素設(shè)置了相對定位，并將圖片設(shè)置為塊級元素。接著使用:after偽類在容器元素上創(chuàng)建一個半透明的蒙版，并將透明度設(shè)置為0。同時，我們給蒙版添加了一個過渡效果，以實(shí)現(xiàn)鼠標(biāo)懸停時透明度逐漸變化的效果。

在HTML中，我們可以將需要添加蒙版的圖片放在一個容器元素中，并設(shè)置其class為mask：

<div class="mask">
<img src="example.jpg" alt="example" />
</div>

最后，我們可以根據(jù)需要調(diào)整蒙版的顏色、透明度、過渡時間等屬性，以達(dá)到最佳的效果。