在CSS中创建一个遮罩层并阻止点击穿透的常见方案

1. 使用 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;
}

2. 使用 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属性设置的有啥不同?

　　通过 设置遮罩层的透明度与使用透明度属性设置的方式有一些不同。

1. 这种方式通过使用 RGBA 颜色值来设置遮罩层的背景颜色，并通过最后一个参数（alpha 值）来控制透明度。在这种情况下，遮罩层的透明度会直接应用于其背景颜色，而不会影响遮罩层上其他内容的透明度。

2.   透明度属性：CSS 提供了 opacity 属性用于控制元素的透明度。将透明度属性应用于遮罩层元素时，不仅会影响其背景颜色的透明度，还会影响遮罩层上其他内容的透明度。换句话说，透明度属性会同时影响遮罩层的背景和内容的透明度。

　　 例如，如果遮罩层上有文本或其他元素，并且将透明度属性设置为 0.5，那么除了背景颜色变为半透明外，遮罩层上的文本或其他元素也会变得半透明。这可能不是您想要的效果。

　　 因此，如果您只想要调整遮罩层的背景颜色的透明度，而不影响其他内容的透明度，使用 background-color: rgba(0, 0, 0, 0.5); 是更合适的选择。