如何使用CSS反转颜色？

83

的HTML

<div>
    <p>inverted color</p>
</div>

的CSS

div {
    background-color: #f00;
}
p { 
    color: /* how to use inverted color here in relation with div background ? */
}

有什么办法可以p用CSS反转颜色？

color: transparent;为什么color: invert;甚至在CSS3中也没有？

css colors

— 博詹德拉·拉尼雅（Bhojendra Rauniyar）
source

1

-webkit-filter：反转（100％）;

— 丹尼尔__

1

这可能对您很有帮助

— 罗恩·范·德·

3

在这个小提琴中，我尝试结合了3种方法：用于WebKit的CSS过滤器，用于Firefox的SVG过滤器以及outline-color: invert Lea Verou为IE发明的绝妙技巧。不幸的是，Opera（Presto）并未通过裁剪轮廓填充的区域overflow，因此无法在此处正常工作。我希望这个演示对以后的实验仍然有用。

— Ilya Streltsyn

124

将相同颜色的背景添加到段落中，然后使用CSS反转：

div {
    background-color: #f00;
}

p { 
    color: #f00;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

<div>
    <p>inverted color</p>
</div>

展开摘要

— 布鲁诺·莱莫斯（Bruno Lemos）
source

这将反转color，但不会反转background。碰巧的是，color它设置为与相同background-color。请参阅以下有关反转背景的解决方案。

— ᆼ ᆺ ᆼ

8

这是使用的另一种方法mix-blend-mode: difference，它实际上将反转背景，而不仅是单色：

div {
  background-image: linear-gradient(to right, red, yellow, green, cyan, blue, violet);
}
p {
  color: white;
  mix-blend-mode: difference;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscit elit, sed do</p>
</div>

展开摘要

— ᆼᆺᆼ
source

1

+1mix-blend-mode: difference作品在那里filter: invert(100%)当用于失败position: fixed（比如模态）的stackoverflow.com/a/37953806/366332

— 瓦尼Totaro

2

我认为处理此问题的唯一方法是使用JavaScript

试试这个反转特定元素的文字颜色

如果您使用css3进行此操作，则仅与最新的浏览器版本兼容。

— 简·彼得
source