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?
I think the only way to handle this is to use JavaScript
Try this Invert text color of a specific element
If you do this with css3 it's only compatible with the newest browser versions.
Here is a different approach using mix-blend-mode: difference
, that will actually invert whatever the background is, not just a single colour:
div {_x000D_
background-image: linear-gradient(to right, red, yellow, green, cyan, blue, violet);_x000D_
}_x000D_
p {_x000D_
color: white;_x000D_
mix-blend-mode: difference;_x000D_
}
_x000D_
<div>_x000D_
<p>Lorem ipsum dolor sit amet, consectetur adipiscit elit, sed do</p>_x000D_
</div>
_x000D_
Source: Stackoverflow.com