如何使用 CSS 反转颜色? [英] How can I invert color using CSS?

问题描述

HTML

<p>反转颜色</p>

CSS

div {背景色:#f00；}p{color:/* 此处如何使用与 div 背景相关的反转颜色?*/}

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

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

解决方案

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

div {背景色:#f00；}p{颜色:#f00；-webkit-过滤器:反转(100%)；过滤器:反转(100%)；}

<p>反转颜色</p>

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

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

There is color: transparent; why not color: invert; even in CSS3?

解决方案

Add the same color of the background to the paragraph and then invert with CSS:

div {
    background-color: #f00;
}

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

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

这篇关于如何使用 CSS 反转颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！