根据css中的背景反转文本颜色答案

【问题标题】：invert text color based on background in css根据css中的背景反转文本颜色
【发布时间】：2018-12-01 20:35:17
【问题描述】：

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

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

但这以某种方式将元素的背景颜色更改为一些奇怪的橙灰色。是否有一个仅用于反转文本颜色的纯 CSS（仅较少）选项？

【问题讨论】：

@Pete 这不是您链接的问答的副本。这是一个不同的问题。
我希望你会发现这个有用css-tricks.com/reverse-text-color-mix-blend-mode
我打开了那个精确的选项卡和它的 MDN 页面，但是不知何故将背景颜色更改为橙色。

标签： css text colors background less

【解决方案1】：

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

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

如果您需要基于 child 或更远元素而不是父元素或 close 元素来区分差异，它尤其适用。

我将它与自定义光标（黑色圆圈）一起使用，这使它与后面的元素形成了很好的对比。样品笔在这里：https://codepen.io/m3t4lch7/pen/VwwOKNd

【讨论】：

【解决方案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>

【讨论】：

感谢您的回复，但这不是我想要的结果，我。效果使实际文本不可见，我希望文本具有反色。
可能是浏览器特有的问题。在 Chrome 和 Firefox 上测试后编辑了改进浏览器支持的答案（也从过滤器中删除了对比度，因为它似乎在某些浏览器中几乎没有效果，但知道尝试使用过滤器值（包括链接其他过滤器）可以更好地呈现文本颜色、对比度等）。
我使用 Chrome Canary。我也在 IE 和 Edge 中尝试过。不过谢谢。
在 Chrome、Firefox 和 Edge 中测试，它对我有用。您正在测试的网站上可能存在一些冲突的 css。
可能有，如果它对你有用，那么我不明白为什么它不应该工作。感谢您的尝试。