在網頁設計中，圖片遮罩層是一種常見的效果，它可以讓圖片更加美觀，突出主題。這種效果通常通過CSS實現。下面我們來介紹一下如何使用CSS實現圖片遮罩層。

/* HTML代碼 */
<div class="container">
<img src="image.jpg">
<div class="mask"></div>
</div>
/* CSS代碼 */
.container {
position: relative;
width: 300px;
height: 200px;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
.container:hover .mask {
display: block;
}

首先，我們在HTML中創建一個容器div，然后在這個容器中放置圖片。接著，我們創建一個div元素，這個div元素就是我們的遮罩層。這個遮罩層的位置要與圖片重疊，所以我們設置它的position為absolute，然后設置top和left都為0。在設置遮罩層的寬度和高度時，我們使用百分比，這樣無論圖片的尺寸如何，遮罩層都能覆蓋整個圖片。

接著，我們通過CSS設置遮罩層的顏色和透明度，這里我們使用rgba設置顏色，它的第四個參數表示透明度，取值范圍為0-1。我們的目的是使遮罩層半透明，所以設置透明度為0.5。最后，我們將遮罩層的display設置為none，這樣遮罩層一開始是不可見的。

最后，我們通過CSS設置容器的hover狀態，當鼠標懸停在容器上時，顯示遮罩層。這里，我們將遮罩層的display設置為block，這樣它就會出現在圖片上方。

通過以上代碼，我們就可以實現一個簡單的圖片遮罩層效果。如果需要其他效果，可以在這個基礎上進行修改。例如，可以修改遮罩層的顏色和透明度，改變遮罩層的形狀，添加文字或圖標等。