如何使用CSS反转颜色？

Question

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: invert;，却有color: transparent;呢？

- Bhojendra Rauniyar

---

-webkit-filter: invert(100%); 可以翻译为“-webkit滤镜：反相（100%）；”。 - daniel__

这可能对您非常有帮助：http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/ - Ron van der Heijden

我在这个JSFiddle中试图结合3种方法：针对WebKit的CSS滤镜、针对Firefox的SVG滤镜以及由Lea Verou发明的outline-color: invert的巧妙技巧来处理IE。不幸的是，Opera（Presto）没有通过overflow剪切轮廓填充区域，因此它在那里无法工作。我希望这个演示仍然可以用于进一步的实验。 - Ilya Streltsyn

@Ronvander 这个链接已经失效了。 - PoolloverNathan

这就是为什么我认为不仅仅嵌入信息是荒谬的原因。制作链接的唯一真正优势是获得SEO反向链接信用，如果链接过期，这也将是无用的。 - easleyfixed

Answer 1

在 CSS 中将段落的背景设置为相同的颜色，然后进行反转：

div {
    background-color: #f00;
}

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

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

- Bruno Lemos

---

这会反转 color，但不会反转 background。恰好 color 被设置为与 background-color 相同。请参见下面的解决方案，以反转背景。 - ՕլՁՅԿ

Answer 2

这里有一种不同的方法，使用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>

- ՕլՁՅԿ

---

当使用position:fixed（例如弹出框）时，mix-blend-mode:difference可以发挥作用，而filter:invert(100%)则无法起到作用。 - Vanni Totaro

无法在economist.com上运行。html {mix-blend-mode: difference !important;}不能反转背景。（html {filter: invert(100%) !important;}也不行） - tejasvi88

@tejasvi88 mix-blend-mode 意味着两个图层将会“混合”在一起。你必须在子节点上使用 mix-blend-mode。在这个例子中，p 与 div 混合，效果是 p 相对于其下方的 div 内容被反转了。 - Mulan

Answer 3

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

尝试这个：反转特定元素的文本颜色 如果您使用css3进行此操作，则仅与最新版本的浏览器兼容。

- Jan Peter

Answer 4

我知道这是一个老问题，但如果你想要反转整个 p 而不仅仅是颜色，那么现在的做法是使用 backdrop-filter。

div {
  background-color: #f00;
  padding: 2px;
}

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

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

- Pete