在網頁中，有時我們需要將一部分內容遮蓋起來，這時候就可以使用CSS遮罩技術。下面我們來介紹幾種不同的CSS遮罩方式：

1.使用背景遮罩

.mask {
background-color: rgba(0,0,0,0.5);   /* 設置半透明黑色背景 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

在HTML代碼中，只需要將需要遮罩的元素包裹在一個新的div標簽中，然后在CSS中設置這個div的背景顏色為半透明的黑色，再將這個div設為絕對定位，寬高設置為100%即可實現遮罩效果。

2.使用偽元素遮罩

.mask:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);   /* 設置半透明黑色背景 */
z-index: -1;
}

這種方式與第一種方式類似，不同的是使用了CSS的偽元素:before，將其設置為絕對定位，然后設置其背景顏色為半透明黑色即可實現遮罩效果。

3.使用svg遮罩

<svg width="0" height="0">
<defs>
<mask id="mask">
<rect x="0" y="0" width="100%" height="100%" fill="#fff"></rect>
<rect x="0" y="0" width="100%" height="100%" fill="#000"></rect>
</mask>
</defs>
</svg>
.mask {
mask: url(#mask);
}

這種方式使用了一個SVG圖片作為遮罩。代碼中我們首先使用了SVG的mask標簽定義了一個id為“mask”的遮罩，這個遮罩包含兩個矩形，一個透明（白色）和一個不透明（黑色），黑色的矩形將顯示出需要遮罩的內容。然后在CSS中將需要遮罩的元素的mask屬性設置為url(#mask)即可。

以上三種方式都可以實現CSS遮罩效果，我們可以根據需要選擇不同的方式來進行頁面制作。