CSS中有很多实用的技巧，其中一种就是使用笼罩层（overlay）。笼罩层是指覆盖在其他元素上方的半透明层，可以用于实现各种有趣的效果。

要创建一个笼罩层，我们可以使用CSS中的伪元素（pseudo-element）::before或者::after。这两个伪元素可以在元素的前面或者后面创建一个虚拟的元素，我们可以利用这个特性来创建笼罩层。

.my-container {
position: relative; /* 父元素设置position: relative */
/* 省略其他样式 */
}
.my-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* 设置半透明背景色 */
z-index: 1;
}
/* ::before创建的虚拟元素设置z-index为1，保证在其他子元素的下面 */
.my-content {
position: relative; /* 子元素设置position: relative */
z-index: 2; /* 子元素设置z-index为2，保证在笼罩层的上面 */
/* 省略其他样式 */
}

上述代码中，我们在父元素.my-container中使用了::before伪元素来创建笼罩层，同时为了保证子元素.my-content在笼罩层的上面显示，需要将子元素的z-index设置为比伪元素的z-index更高。

使用笼罩层可以实现很多特效，比如鼠标悬停时显示遮罩层、图片详情预览等等。在实际开发过程中，我们可以根据需求来选择使用笼罩层来实现设计师想要的效果。