css上层遮罩不影响下层

在网页设计过程中，我们经常需要用到上层遮罩（Overlay）来实现一些特效，比如遮住图片或视频来增强主题感，或者用于显示提示信息。然而，使用上层遮罩时，很容易遇到下层元素被遮挡的问题，这时候我们就需要解决如何让上层遮罩不影响下层元素的显示。

在CSS中，可以使用CSS属性pointer-events来解决这个问题。默认情况下，所有的HTML元素是可以被鼠标事件（鼠标点击、悬停等）响应的，并且可以被上层元素遮挡。通过将该属性设置为none，就可以使该元素无法响应鼠标事件，并且可以让下层元素显示。

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none; /* 关键代码 */
} 

在上面的代码中，我们定义了一个覆盖整个页面的黑色半透明遮罩，并设置了该元素的pointer-events属性为none，从而可以将该元素置于下层，不影响下层元素的显示。这时候，我们可以在该元素下方添加需要显示的HTML元素。

值得注意的是，pointer-events属性在一些浏览器中的支持情况可能不同，需根据具体情况进行测试和兼容。另外，在使用上层遮罩时，需要注意遮罩层的z-index不能过高，否则可能遮挡住更多的下层元素。