CSS 圖片下蒙版是一種常用的效果，可以讓圖片在鼠標(biāo)懸浮時蒙上一層顏色或透明度。下面是一個簡單的實(shí)現(xiàn)方法。

<div class="mask-container">
<img src="example.jpg" alt="example">
<div class="mask"></div>
</div>
.mask-container {
position: relative;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black; /* 或者使用 rgba(0, 0, 0, 0.5) 來設(shè)置透明度 */
opacity: 0; /* 初始狀態(tài)為完全透明 */
transition: opacity 0.5s; /* 添加過渡效果 */
}
.mask:hover {
opacity: 0.5; /* 懸浮時改變透明度 */
}

代碼解析：

• 先創(chuàng)建一個包含圖片和蒙版的 div，設(shè)置其 position 屬性為 relative。
• 在 div 中插入 img 標(biāo)簽，用于顯示圖片。
• 在 img 標(biāo)簽后面插入一個 div，用于顯示蒙版。設(shè)置其 position 屬性為 absolute，top 和 left 屬性為 0，使其覆蓋在圖片之上。width 和 height 屬性都設(shè)置為 100%，即遮蓋整個圖片。
• 設(shè)置蒙版的初始狀態(tài)為完全透明（opacity: 0），并添加過渡效果（transition: opacity 0.5s）。
• 給蒙版的 hover 狀態(tài)設(shè)置透明度為 0.5，鼠標(biāo)懸浮時會自動出現(xiàn)遮罩效果。

通過在圖片下添加蒙版，可以使其在用戶鼠標(biāo)懸浮時呈現(xiàn)更醒目的效果，增加用戶體驗(yàn)和頁面美觀度。