如何使用 CSS 反转颜色？答案

【问题标题】：How can I invert color using CSS?如何使用 CSS 反转颜色？
【发布时间】：2013-07-18 11:25:16
【问题描述】：

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 ? */
}

有没有办法用 CSS 反转 p 颜色？

即使在 CSS3 中也有 color: transparent; 为什么没有 color: invert;？

【问题讨论】：

-webkit-filter: invert(100%);
这可能对你很有帮助：net.tutsplus.com/tutorials/html-css-techniques/…
在this fiddle 中，我尝试结合 3 种方法：WebKit 的 CSS 过滤器、Firefox 的 SVG 过滤器，以及 IE 的 outline-color: invert invented by Lea Verou 的绝妙技巧。不幸的是，Opera (Presto) 没有剪裁由overflow 填充的区域，所以它不会在那里工作。我希望这个演示对进一步的实验仍然有用。
@Ronvander 链接已失效

标签： css colors

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

给段落添加相同颜色的背景，然后用CSS反转：

div {
    background-color: #f00;
}

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

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

【讨论】：

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

【解决方案3】：

这是使用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>

【讨论】：

+1 mix-blend-mode: difference 适用于 filter: invert(100%) 与 position: fixed 一起使用时失败的情况（比如模态）stackoverflow.com/a/37953806/366332
正是我一直在寻找的