CSS 添加蒙板是實現網頁效果的一種常用方式。蒙板的作用是在網頁某個元素上覆蓋一層半透明的色塊，以突出該元素或隱藏其它元素。下面介紹兩種 CSS 添加蒙板的方法。

方法一：使用偽元素 after 和 before

代碼如下：
.element {
position: relative;
}
.element::before,
.element::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5); /* 半透明黑色 */
opacity: 0; /* 初始透明度為0，鼠標移上去時變成1 */
transition: opacity 0.3s ease-in-out; /* 設置漸變動畫效果 */
}
.element:hover::before,
.element:hover::after {
opacity: 1;
}

上述代碼中，使用了偽元素 before 和 after 創建兩個圖層，分別覆蓋在元素上下，背景色均為半透明黑色。初始時，漸變透明度為0，當鼠標懸停在該元素上時，透明度變成1，從而達到添加蒙板的效果。

方法二：使用 CSS3 filter 屬性

代碼如下：
.element {
position: relative;
}
.element::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(10px) brightness(0.5);
z-index: -1; /* 將蒙版圖層放到元素底部 */
}

上述代碼中，使用偽元素 before 創建一個圖層，使用 filter 屬性設置模糊度和亮度，達到半透明的效果。需要注意的是，使用 filter 屬性添加蒙板時，需要將蒙版圖層放到元素底部，即設置 z-index: -1。