使用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: transparent;为什么不color: invert;？

Answer 1

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

div {
    background-color: #f00;
}

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

Answer 2

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

试试这个Invert text color of a specific element

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

Answer 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>