在網頁設計中，圖片是不可缺少的元素。然而，有時我們需要給圖片添加一些特殊的效果，以使其更好看、更有趣。其中一種方法是使用CSS蒙版技術，用一種半透明的圖層覆蓋在圖片上，使其看起來更加神秘和獨特。本文將介紹如何使用CSS來實現圖片加蒙版的效果。 首先，在HTML中插入一張圖片：

<img src="example.jpg" alt="example">

然后，在CSS中創建一個名為“mask”的類，并為它添加以下樣式：

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

這個樣式會將一個半透明的黑色圖層覆蓋在圖片上，使其看起來更加神秘和獨特。為了使蒙版出現和消失更加平滑，我們使用了CSS的過渡動畫效果。 最后，在HTML中給圖片添加“mask”類：

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

現在，當鼠標指針懸停在圖片上時，蒙版會出現；當鼠標指針離開圖片時，蒙版會消失。 這是一個簡單又實用的CSS技術，可以很容易地為圖片添加獨特的效果。通過調整顏色、透明度和過渡動畫效果等參數，您可以輕松創建自己想要的效果。