- 使用
position: fixed和z-index：创建一个具有全屏尺寸的<div>元素，并将其设置为position: fixed，top: 0，left: 0，width: 100%，height: 100%，然后使用z-index将其放在其他元素之上。通过设置透明度、背景颜色或使用其他视觉效果，可以实现遮罩层的效果。这样的遮罩层将位于所有其他内容的顶部，并阻止点击事件穿透到下面的元素。
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
- 使用
pointer-events：通过将遮罩层元素的pointer-events属性设置为auto或none，可以控制其是否接受鼠标事件。将其设置为auto会启用鼠标事件，而将其设置为none则会禁用鼠标事件。通过将遮罩层设置为不接受鼠标事件，可以防止点击事件穿透到下面的元素。
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
pointer-events: none;
}
p.s 通过background-color: rgba(0, 0, 0, 0.5);设置的遮罩透明度与opacity属性设置的有啥不同?
通过 设置遮罩层的透明度与使用透明度属性设置的方式有一些不同。
-
：这种方式通过使用 RGBA 颜色值来设置遮罩层的背景颜色，并通过最后一个参数（alpha 值）来控制透明度。在这种情况下，遮罩层的透明度会直接应用于其背景颜色，而不会影响遮罩层上其他内容的透明度。 -
透明度属性：CSS 提供了
opacity属性用于控制元素的透明度。将透明度属性应用于遮罩层元素时，不仅会影响其背景颜色的透明度，还会影响遮罩层上其他内容的透明度。换句话说，透明度属性会同时影响遮罩层的背景和内容的透明度。
例如，如果遮罩层上有文本或其他元素，并且将透明度属性设置为 0.5，那么除了背景颜色变为半透明外，遮罩层上的文本或其他元素也会变得半透明。这可能不是您想要的效果。
因此，如果您只想要调整遮罩层的背景颜色的透明度，而不影响其他内容的透明度，使用 background-color: rgba(0, 0, 0, 0.5); 是更合适的选择。