CSS中有一種非常常用的效果就是遮罩層效果，它可以實現很多好玩的效果。遮罩層的原理就是在頁面的上層添加一層遮罩層，可以通過CSS中的z-index屬性來實現層級效果。這篇文章將介紹幾種CSS中常見的遮罩層效果。

1. 半透明遮罩層效果

.mask {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
}

通過上面代碼的設置，可以在頁面上添加一層半透明的遮罩層，其中rgba函數中的最后一個數值為透明度，0為完全透明，1為完全不透明。同時，position屬性設置為fixed，可以讓遮罩層始終固定在頁面的最上方。

2. 全屏遮罩層效果

.mask {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
}

與上一個效果不同的地方在于，position屬性設置為absolute，這樣在頁面中有滾動條的情況下，遮罩層也會跟著滾動。同時，遮罩層的寬高也會隨著屏幕大小的變化而變化，實現了全屏的遮罩效果。

3. 文字提示遮罩層效果

.mask {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
color: #fff;
font-size: 24px;
}

通過在遮罩層上添加文字提示，可以實現文字提示遮罩層效果。其中，設置text的position屬性為absolute，top和left屬性為50%，transform屬性為translate(-50%,-50%)可以讓文字提示始終水平垂直居中。

總之，CSS中的遮罩層效果可以為我們的頁面添加很多有趣的效果，同時遮罩層效果也很容易實現，只需要幾行CSS代碼即可。