css - 如何使用 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 ? */
}

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

color: transparent;为什么color: invert;即使在 CSS3 中也不行？

score 157 · Accepted Answer

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

div {
    background-color: #f00;
}

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

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

score 26 · Accepted Answer

这是使用的另一种方法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>

score 2 · Accepted Answer

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

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

3 回答 3