要使用 CSS 制作半透明遮罩层,可以使用以下代码:
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 这里的 0.5 表示透明度为 50% */
z-index: 9999;
}
其中,.overlay
是一个自定义的 CSS 类名,可以根据实际需要修改。position: fixed;
表示该元素是固定定位的,top: 0;
和 left: 0;
表示该元素位于屏幕左上角,width: 100%;
和 height: 100%;
表示该元素的宽度和高度都与屏幕大小相同,从而覆盖整个页面。background-color: rgba(0, 0, 0, 0.5);
表示该元素的背景色为黑色,透明度为 50%。z-index: 9999;
表示该元素的层级,使其位于其他元素之上。
需要注意的是,如果要让遮罩层显示在某个元素之上,可以将该元素的 z-index
属性设置为比遮罩层更大的值。
关键词:
position: fixed;
:固定定位background-color: rgba(0, 0, 0, 0.5);
:背景色为黑色,透明度为 50%z-index: 9999;
:层级为 9999