CSS做一個(gè)遮罩可以使網(wǎng)頁(yè)元素更具有視覺(jué)效果。下面我們來(lái)看一下如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的遮罩效果。

/* CSS代碼 */
.mask {
position: relative;
display: inline-block;
}
.mask::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
opacity: 0; /* 遮罩默認(rèn)不顯示 */
transition: opacity 0.3s; /* 加上過(guò)渡效果 */
}
.mask:hover::before {
opacity: 1; /* 鼠標(biāo)懸停時(shí)顯示遮罩 */
}

上述代碼中，我們創(chuàng)建了一個(gè)`mask`類用于包裹要遮罩的元素。然后通過(guò)`::before`偽元素來(lái)添加遮罩效果。偽元素的`content`屬性為空，然后設(shè)置`position: absolute`，`top`和`left`均為0，寬高分別為100%。最后設(shè)置`background-color`為半透明黑色，即實(shí)現(xiàn)了一個(gè)遮罩層。

接下來(lái)，我們?cè)O(shè)置`opacity`為0，使得遮罩默認(rèn)不顯示。再設(shè)置一個(gè)過(guò)渡效果，使遮罩的出現(xiàn)和消失更加自然。最后使用`hover`偽類，當(dāng)鼠標(biāo)懸停在`mask`元素上時(shí)，遮罩就會(huì)顯示出來(lái)。

這樣，就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的遮罩效果。