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>