CSS制作遮罩效果是常見的一種技巧，它可以幫助網頁設計師在頁面布局時進行特殊元素的處理，讓頁面更加精美。下面是一段CSS制作遮罩效果的代碼，通過這個例子我們可以學會如何使用CSS控制元素的排版及樣式。 首先，我們需要在HTML頁面中添加一個DIV元素，作為需要遮罩的元素容器。我們可以將其命名為”mask”。代碼如下：

<div class="mask"></div>

接下來，在CSS中添加以下樣式，創建具有遮罩效果的容器：

p {
position: relative;
font-size: 16px;
text-align: center;
}
.mask {
position: relative;
display: inline-block;
background-color: #000;
opacity: 0.5;
}
.mask:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.mask:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background-image: url('path/to/image.png');
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}

上述代碼段中，我們首先對”mask”容器設置了一些基本樣式，使其成為一個黑色半透明背景。 然后，我們通過在“mask”元素上添加 ”:before”和”:after”偽類，給它添加了兩個圖層。其中，”before”是一個白色的遮罩層覆蓋在“mask”上，用來遮擋后方內容；”after”則是一個居中的圖層，用來展示需要展示的圖片或文字等內容。 通過這些CSS代碼的控制，我們可以輕易地制作出一個遮罩效果，讓頁面更加美觀。