CSS中，盒子遮罩是指將一個(gè)盒子的背景圖或顏色遮蓋住一部分或全部的盒子內(nèi)容，達(dá)到美化視覺(jué)效果的效果。

下面是一些CSS代碼，可以用來(lái)實(shí)現(xiàn)盒子遮罩效果，具體實(shí)現(xiàn)方式可以根據(jù)自己的需求進(jìn)行調(diào)整。

.box {
position: relative;
background: url("xxx.jpg") no-repeat center center/cover;
}
.box:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}

上述代碼中，.box是一個(gè)盒子的類(lèi)名，background屬性設(shè)置了盒子的背景圖，no-repeat表示背景圖不重復(fù)，center center/cover表示將背景圖居中并自適應(yīng)大小。.box:before是通過(guò)CSS偽類(lèi):before來(lái)實(shí)現(xiàn)的，用于設(shè)置遮罩層的樣式，content屬性用于插入偽元素的內(nèi)容（為空），background屬性設(shè)置了遮罩層的背景顏色，此處使用rgba格式的黑色，透明度為50%。

使用盒子遮罩可以讓我們的網(wǎng)頁(yè)更加美觀、優(yōu)雅，同時(shí)也能提高用戶(hù)的體驗(yàn)感，是CSS中常用的技巧之一。