觸摸圖片加蒙版是網頁設計中常用的一種效果，它可以讓用戶在鼠標移動到圖片上時，圖片的顏色變暗或者顯示出相應的提示信息。通過CSS可以輕松實現這種效果。

img {
position:relative;
}
img:hover:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}

上述代碼中，我們首先對圖片設置了相對定位，這是為了讓蒙版絕對定位時相對于圖片進行位置參照。接著，在圖片的:hover狀態(tài)下，設置了一個after偽元素，這個元素的content值為空，display值為block，讓它以塊級元素的方式呈現出來。設置position為absolute，top和left值為0，width和height值為100%時，這個偽元素就會完全覆蓋住圖片。接下來，我們設置了背景色為rgba(0,0,0,0.5)，這里的rgba就是利用了CSS3的顏色設置功能，設置背景色為半透明黑色，使得蒙版產生一種半透明的效果。最后我們將z-index值設為1，這是為了保證蒙版始終在圖片上面。

除了上述方法外，我們還可以使用:before偽元素或者實際的html元素來實現蒙版效果。這里的關鍵就是利用了CSS偽元素和層級關系的特性，讓鼠標懸浮在圖片上時，出現遮罩層，從而達到簡單而有效的效果。