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

Question

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

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

但这会以某种方式将元素的背景颜色更改为一些奇怪的橙色灰色。是否有仅反转文本颜色的 CSS-only(less-only)选项？

Answer 1

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

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

如果您需要将差异基于子 或更远 的元素而不是父元素或接近的元素，它尤其有用。

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