如何使用 CSS 反转颜色？

超文本标示语言

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

CSS

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

Is there any way to invert the p color with CSS?

有 color: transparent;为什么不 color: invert;即使在 CSS3？

194052 次浏览

小开

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

如果你使用 css3，它只能与最新的浏览器版本兼容。

小开

最佳答案

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

div {
background-color: #f00;
}


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

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

小开

这里有一个使用 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>