您还可以将此样式应用于要反转其颜色的元素：

filter: invert(1);
mix-blend-mode: difference;

如果您需要将差异基于一个子元素或一个更远的元素，而不是一个父元素或一个接近的元素，那么它尤其有效。
我使用了一个自定义光标（黑色圆圈），这使得它与后面的元素形成了很好的对比。https://codepen.io/m3t4lch7/pen/VwwOKNd

可以将文本颜色设置为transparent，并使用background-clip和filter反转和灰度化通过透明文本显示的颜色。
查看Methods for Contrasting Text Against Backgrounds上对这种方式可以实现的各种效果的更详细的解释。
在您的情况下，听起来您正在寻找类似以下内容的内容：

#one {
  background-color: blue;
}

#two {
  background-color: white;
}

span {
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: invert(1) grayscale(1);
  -webkit-filter: invert(1) grayscale(1);
}

<div id="one">
  <span>Some text</span>
</div>
<div id="two">
  <span>Some text</span>
</div>