在css中基于背景反转文本颜色

Question

我有一个不同深浅的蓝色网格，每一个都包含文本，如果背景是深色，我需要文本是白色的，反之亦然，我有：

color: #333;
isolation: isolate;
mix-blend-mode: difference;

但不知何故，这些元素的背景颜色变成了某种奇怪的橙色灰色。是否有仅CSS (less- only )选项可仅反转文本颜色？

Answer 1

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

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

如果您需要将差异建立在的子或更远的元素上，而不是父元素或关闭的元素，则这种方法尤其有效。

我使用了一个自定义光标(黑色圆圈)，这使得它与后面的元素形成了很好的对比。示例笔在这里：https://codepen.io/m3t4lch7/pen/VwwOKNd

​

​

Answer 2

可以将文本颜色设置为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>

​