基于CSS如何根据背景色反转文本颜色

Question

我有一个由不同蓝色阴影组成的网格，它们每个都包含文本，如果背景是深色，则需要将文本变为白色，反之亦然，我有：

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

但是这样会改变元素的背景颜色，变成一种奇怪的橙灰色。有没有只能使用CSS（或Less）的选项，仅反转文本颜色？

- J-Cake

---

希望您会发现这个链接有用 https://css-tricks.com/reverse-text-color-mix-blend-mode/ - It worked yesterday.

我打开了确切的选项卡和MDN页面，但是它以某种方式将背景颜色更改为橙色。 - J-Cake

Answer 1

你也可以将这种样式应用于您想要反转颜色的元素：

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

如果您需要根据一个子元素或一个更远的元素而不是父元素或接近的元素来确定差异，则此方法尤其有效。

我将其与自定义光标（黑色圆圈）一起使用，这使其与后面的元素形成了良好的对比。示例代码请看此处：https://codepen.io/m3t4lch7/pen/VwwOKNd

- m3t4lchu

Answer 2

你可以将文本颜色设置为transparent，并使用background-clip和filter来反转和灰度化透明文本中显示的颜色。如果想要了解更多通过此方法可以实现的各种效果，请查看与背景对比文本的方法的更详细解释。

在你的情况下，听起来你正在寻找类似以下的内容：

#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>

- benvc

---

谢谢您的回复，但这并不是我想要的结果。实际上，这种效果会使文本变得不可见，我希望文本具有反色。 - J-Cake

可能是浏览器特定的问题。在Chrome和Firefox上测试后，编辑了答案以改善浏览器支持（还从过滤器中删除了对比度，因为在某些浏览器中似乎没有什么影响，但请注意尝试使用过滤器值，包括链接其他过滤器，可能会实现更好的文本颜色、对比度等渲染）。 - benvc

可能存在这种情况，如果它对你有用，那我不明白为什么它不能起作用。谢谢你的尝试。 - J-Cake

@blow - 是的，反转颜色基本上是从 rgb(255, 255, 255) 减去颜色，所以像您在评论中指出的灰色就会变为 rgb(128, 128, 128)，它将反转为 rgb(127, 127, 127)，因此反转后的文本将与背景颜色融为一体。 - benvc

@blow - 为了澄清之前的评论，使用invert(1)完全反转颜色会得到上述简单的公式（使用不同的反转值会使数学稍微复杂一些）。 - benvc