CSS 圖片遮罩效果是一種可以讓圖片顯得更加生動和有趣的效果。下面我們就來介紹一下實現這種效果的代碼。 首先，我們需要在 HTML 中添加一個圖片元素，并指定一個唯一的 ID 名稱，方便在 CSS 中進行樣式設置。我們這里以一張名為 "example.jpg" 的圖片為例子，代碼如下：

<img id="mask-example" src="example.jpg">

在 CSS 中，我們需要為這個圖片元素設置一些樣式，才能達到遮罩效果。 第一步是設置圖片元素的定位方式為相對位置，這樣我們才能更加方便地調節遮罩層的顯示位置。同時，我們還需要將圖片元素的寬度和高度設置為與原圖相同，以使遮罩效果正常。

#mask-example {
position: relative;
width: 500px;
height: 300px;
}

接下來，我們需要添加一個遮罩層元素，并為其設置背景顏色和透明度，以達到遮擋圖片的效果。我們這里采用基于偽元素的方式實現遮罩層，代碼如下：

#mask-example::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

在這段代碼中，我們使用了 content 屬性來添加偽元素，并為其設置了絕對定位、寬度和高度。同時，我們使用了 rgba() 函數來設置遮罩層的背景顏色和透明度。其中，第四個參數 0.5 表示透明度為 50%。 最后，我們需要將遮罩層元素的 z-index 屬性設置為比圖片元素更小的值，以使其處于圖片元素的下方，從而達到遮擋的效果。

#mask-example::before {
z-index: -1;
}

通過以上代碼的實現，我們就成功實現了一個簡單的圖片遮罩效果。可以根據實際需求，對代碼進行修改和調整，以得到更加理想的效果。