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 ? */
}

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

有 color: transparent; 为什么 color: invert; 即使在 CSS3 中也没有？

Answer 1

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

div {
    background-color: #f00;
}

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

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