根据CSS中的背景反转文本颜色

Question

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

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

但这以某种方式将元素的背景颜色更改为一些怪异的橙色。是否有仅CSS（仅次要）的选项将仅反转文本颜色？

Answer 1

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

Answer 2

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

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

如果您需要将差异作为子级或更远的元素，而不是父项或close元素，则此方法特别有用。

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