Panorama Média Global

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

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

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

Accepted Answer

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>

Answer 2

Here is a different approach using mix-blend-mode: difference, that will actually invert whatever the background is, not just a single colour:

div {
  background-image: linear-gradient(to right, red, yellow, green, cyan, blue, violet);
}
p {
  color: white;
  mix-blend-mode: difference;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscit elit, sed do</p>
</div>

Answer 3

I think the only way to handle this is to use JavaScript

If you do this with css3 it's only compatible with the newest browser versions.

How Can I Invert Color Using Css?