CSS中有很多實(shí)用的技巧，其中一種就是使用籠罩層（overlay）。籠罩層是指覆蓋在其他元素上方的半透明層，可以用于實(shí)現(xiàn)各種有趣的效果。

要?jiǎng)?chuàng)建一個(gè)籠罩層，我們可以使用CSS中的偽元素（pseudo-element）::before或者::after。這兩個(gè)偽元素可以在元素的前面或者后面創(chuàng)建一個(gè)虛擬的元素，我們可以利用這個(gè)特性來(lái)創(chuàng)建籠罩層。

.my-container {
position: relative; /* 父元素設(shè)置position: relative */
/* 省略其他樣式 */
}
.my-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* 設(shè)置半透明背景色 */
z-index: 1;
}
/* ::before創(chuàng)建的虛擬元素設(shè)置z-index為1，保證在其他子元素的下面 */
.my-content {
position: relative; /* 子元素設(shè)置position: relative */
z-index: 2; /* 子元素設(shè)置z-index為2，保證在籠罩層的上面 */
/* 省略其他樣式 */
}

上述代碼中，我們?cè)诟冈?my-container中使用了::before偽元素來(lái)創(chuàng)建籠罩層，同時(shí)為了保證子元素.my-content在籠罩層的上面顯示，需要將子元素的z-index設(shè)置為比偽元素的z-index更高。

使用籠罩層可以實(shí)現(xiàn)很多特效，比如鼠標(biāo)懸停時(shí)顯示遮罩層、圖片詳情預(yù)覽等等。在實(shí)際開發(fā)過程中，我們可以根據(jù)需求來(lái)選擇使用籠罩層來(lái)實(shí)現(xiàn)設(shè)計(jì)師想要的效果。