CSS普通遮罩層樣式是網(wǎng)頁設(shè)計中非常常用的一種效果，它可以通過一定的CSS樣式設(shè)置來呈現(xiàn)出半透明的背景遮罩，使得頁面中的一些彈窗或提示框更加優(yōu)雅、引人注目。下面我們來看一下CSS普通遮罩層的幾種實現(xiàn)方式。

/* 第一種方式，設(shè)置遮罩層的透明度及顏色 */
.mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.6;    /* 設(shè)置透明度 */
z-index: 9999;   /* 設(shè)置層級 */
}
/* 第二種方式，設(shè)置遮罩層的背景圖片 */
.mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("xxx.png");
background-repeat: no-repeat;
background-size: cover;
z-index: 9999;
}
/* 第三種方式，通過偽元素創(chuàng)建遮罩層 */
.mask{
position: relative;
z-index: 999;   /* 比遮罩層上方的元素層級低 */
}
.mask::before{
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.6;
z-index: -1;   /* 指定偽元素層級 */
}

以上就是CSS普通遮罩層樣式的三種實現(xiàn)方式，大家可以根據(jù)自己的需求選擇適合的方式。值得一提的是，在設(shè)置遮罩層時一定要注意層級，避免出現(xiàn)其他元素遮擋不到彈出框或提示框的情況。