CSS遮罩效果，常常用于圖像或者其他元素上，給用戶一個視覺上的提示或者反饋。這種效果通常是通過在元素上應用半透明顏色或者圖片來實現的。

在CSS中，我們可以使用偽元素:before或:after來創建遮罩。以下是基礎的CSS代碼：

.element {
position: relative;
}
.element:before {
position: absolute;
top: 0;
left: 0;
content: "";
background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
z-index: 1;
width: 100%;
height: 100%;
display: block;
}

上面這段代碼創建了一個元素(.element)和一個偽元素(:before)，并在偽元素上應用了一個半透明黑色背景。由于偽元素的position屬性為absolute，所以偽元素會被放置在元素上方，并覆蓋整個元素。

我們也可以使用圖片來代替半透明背景。以下是示例代碼：

.element {
position: relative;
}
.element:before {
position: absolute;
top: 0;
left: 0;
content: "";
background-image: url("path/to/image.png"); /* 圖片路徑 */
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0.5;
display: block;
}

如你所見，我們將background-image屬性設置為我們想要使用的圖片，并使用background-repeat和background-size來控制圖片的顯示方式。我們還使用了opacity屬性來控制透明度。

這兩個示例只是基礎的遮罩效果，你可以使用不同的CSS屬性或者組合來創建你想要的效果。希望本文能夠幫助你理解CSS遮罩效果的實現。