CSS3提供了豐富的樣式特性，其中之一是加入黑色遮罩。

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999;
}

上述代碼中的.overlay類指定了一個(gè)定位為固定位置（fixed），覆蓋頁面全屏的元素。黑色遮罩的顏色通過rgba(r, g, b, a)指定，其中r、g、b是紅、綠、藍(lán)三原色的值，而a是alpha的縮寫，用于控制透明度（0表示完全透明，1表示完全不透明）。

通過z-index屬性指定元素的堆疊順序，使黑色遮罩顯示在頁面上層。

使用黑色遮罩可以遮擋掉頁面中某些不需要顯示的元素，制造出更好的用戶體驗(yàn)。例如，當(dāng)用戶點(diǎn)擊彈出式菜單時(shí)，頁面上的其他元素可以被遮擋，而菜單可以更加醒目地呈現(xiàn)在用戶面前。