Css反转元素下方的所有内容

Question

是否有可能使用 css 让一个元素反转它后面的所有内容，以便通过该元素下方的任何内容都将被反转？

在示例中，我希望圆圈在穿过黑色方块时为白色，否则为黑色。

.container {
  height: 500px;
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.invert {
  height: 300px;
  width: 300px;
  background-color: black;
}

.move {
  height: 50px;
  width: 50px;
  background-color: black;
  border-radius: 1000px;
  position: absolute;
  top: 0;
  left: 0;
  animation: move linear 5s infinite;
}

@keyframes move {
  0% {
transform: translate(0,0);
  }
  100% {
transform: translate(500px, 500px);
  }
}

<div class="container">
  <div class="invert">

  </div>
  <div class="move">

  </div>
</div>

这需要与结构无关，因为在我的实际实现中我使用大量随机移动的圆圈作为固定背景，我不知道它们何时会进入或退出正方形，以及圆形和正方形之间的关系页面之间会有所不同

我尝试过 filter: invert(1)，但它并没有达到我需要的效果，我也很好奇它是否可以使用 svg 过滤器来完成。

非常感谢！

Answer 1

您可以在.invert 类中使用带有白色背景的mix-blend-mode: difference：

.container {
  height: 500px;
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.invert {
  height: 300px;
  width: 300px;
  background-color: #FFF;
  mix-blend-mode: difference;
  z-index: 1000;
}

.move {
  height: 50px;
  width: 50px;
  background-color: black;
  border-radius: 1000px;
  position: absolute;
  top: 0;
  left: 0;
  animation: move linear 5s infinite;
}

@keyframes move {
  0% {
transform: translate(0,0);
  }
  100% {
transform: translate(500px, 500px);
  }
}

<div class="container">
  <div class="invert">

  </div>
  <div class="move">

  </div>
</div>

这里的一个警告是它只能反转出现在它后面的元素。因此，如果您的 .move 对象需要在逆变器之后位于 DOM 中，您必须更改其中一个或另一个的 z-index 以使其正确呈现。