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

Question

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

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

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

Answer 1

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

Answer 2

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

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

如果您需要将差值建立在较远的子项或元素而不是父项或close元素的基础上，则它特别有用。

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