如何实现高z-index色温切换遮罩div不阻挡后方元素交互？

这个场景我太熟悉了！做全站色温/滤镜切换的时候，很容易碰到这个问题——遮罩层要盖在最上层，但又不能挡住下面的按钮、链接这些交互元素。给你几个靠谱的解决方案，按优先级推荐：

1. 最直接：给遮罩层添加pointer-events: none #

这是最简单高效的办法，CSS的pointer-events: none属性会让元素完全忽略所有鼠标/触摸事件，这些事件会直接“穿透”到下层的元素上，完美解决遮罩层拦截交互的问题。

示例代码：

#div1 {
  position: fixed; /* 一般全站遮罩会用fixed定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  pointer-events: none; /* 关键属性 */
  /* 你的色温调整样式，比如： */
  filter: hue-rotate(90deg); /* 色相旋转90度，模拟色温变化 */
  background-color: rgba(255, 200, 100, 0.1); /* 也可以用半透明底色配合滤镜 */
}

特殊情况处理：如果遮罩层上有交互元素（比如切换按钮） #

要是你的遮罩层本身需要放一个切换色温的按钮，只需要给这个按钮单独设置pointer-events: auto，就能让它恢复交互能力：

#div1 .color-toggle-btn {
  pointer-events: auto;
  /* 按钮的其他样式 */
}

2. 更简洁：直接给根容器应用滤镜（不需要额外遮罩层） #

如果你的色温效果可以通过CSS filter 属性实现，其实完全可以不用额外的遮罩div，直接把滤镜应用到<body>或者根容器上，这样根本不会有z-index和事件穿透的问题：

示例代码：

body {
  filter: sepia(0.3) hue-rotate(15deg); /* 组合滤镜实现色温调整 */
}

这个方案的好处是代码更简洁，没有额外DOM元素；缺点是如果页面上有某些元素不需要应用色温效果，你需要给这些元素单独设置filter: none来覆盖继承的滤镜。

3. 进阶：用CSS backdrop-filter（适合特殊效果） #

如果你的色温效果需要基于下层内容做混合，比如模糊+色温调整，可以用backdrop-filter，不过这个属性需要元素本身是半透明的，而且同样需要配合pointer-events: none来让事件穿透：

示例代码：

#div1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  pointer-events: none;
  backdrop-filter: hue-rotate(180deg) brightness(0.9); /* 基于下层内容的滤镜 */
  background-color: rgba(0,0,0,0.05); /* 配合半透明底色增强效果 */
}

原理补充 #

为什么z-index高了会挡住交互？因为浏览器的事件触发机制是从视觉层级最高的元素开始检查，如果上层元素捕获了事件，下层元素就不会收到。pointer-events: none相当于告诉浏览器“这个元素不存在于事件捕获链里”，所以事件会直接落到下层的可交互元素上。

内容的提问来源于stack exchange，提问作者Freelancer