一尘不染

如何使用CSS反转颜色?

css

的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中也没有?


阅读 816

收藏
2020-05-16

共1个答案

一尘不染

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

div {

    background-color: #f00;

}



p {

    color: #f00;

    -webkit-filter: invert(100%);

    filter: invert(100%);

}


<div>

    <p>inverted color</p>

</div>
2020-05-16