如何使用 CSS 反转颜色？

Posted 2023-02-23

【中文标题】如何使用 CSS 反转颜色？

【英文标题】：How can I invert color using 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 链接已失效

【参考方案1】：

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

试试这个Invert text color of a specific element

如果您使用 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 一起使用时失败的情况（比如模态）***.com/a/37953806/366332

正是我一直在寻找的