CSS如何实现指定元素反转其后方所有重叠内容的效果

你之前使用filter: invert(1)不生效的核心原因是：filter仅作用于元素本身及其子元素，无法作用于元素后方的下层内容，以下两种方案都可以完美实现你的需求，且完全适配多随机移动圆形、不同页面结构的场景。

方案1：使用CSS原生属性实现（最简单，兼容性好） #

子方案1.1：给移动圆形添加混合模式（无需修改方块元素） #

仅需给移动圆形添加一行mix-blend-mode属性即可，无需调整DOM层级，任意数量的圆形都可以直接复用：

.move {
  height: 50px;
  width: 50px;
  background-color: black;
  border-radius: 1000px;
  position: absolute;
  top: 0;
  left: 0;
  animation: move linear 5s infinite;
  /* 新增这行即可 */
  mix-blend-mode: difference;
}

原理：difference混合模式会取上下层颜色差值的绝对值，黑色圆形在白色背景上混合结果为黑色，在黑色方块上混合结果为白色，完全匹配你要的效果。

子方案1.2：给方块添加背景滤镜（无需修改圆形元素） #

如果要求仅通过固定方块元素实现反转后方所有内容的效果，不需要修改圆形的任何属性，可以使用backdrop-filter：

.invert {
  height: 300px;
  width: 300px;
  background-color: black;
  /* 新增属性，保证方块层级高于所有移动圆形 */
  position: relative;
  z-index: 1;
  /* 反转方块后方所有下层内容 */
  backdrop-filter: invert(1);
}

方案2：使用SVG Filter实现（兼容更老旧浏览器） #

如果需要兼容不支持backdrop-filter的老旧浏览器，可以用SVG滤镜实现同等效果：

1. 先在HTML中添加SVG滤镜定义：

<svg width="0" height="0" style="position:absolute">
  <defs>
    <filter id="invertBackground">
      <feInvert in="BackgroundImage" />
    </filter>
  </defs>
</svg>

2. 给方块和容器添加对应属性：

.container {
  height: 500px;
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  /* 开启背景层供SVG滤镜读取 */
  enable-background: new;
}

.invert {
  height: 300px;
  width: 300px;
  background-color: black;
  position: relative;
  z-index: 1;
  /* 应用SVG反转滤镜 */
  filter: url(#invertBackground);
}

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