Comment inverser la couleur à l'aide de CSS ?

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

Y a-t-il un moyen d'inverser le p couleur avec CSS ?

Il y a color: transparent; pourquoi pas color: invert; même en CSS3 ?

Answer 1

Ajoutez la même couleur de l'arrière-plan au paragraphe, puis inversez-la avec CSS :

div {
    background-color: #f00;
}

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

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

Answer 2

Voici une approche différente utilisant mix-blend-mode: difference qui inversera en fait l'arrière-plan, quel qu'il soit, et pas seulement une seule couleur :

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

Je pense que la seule façon de gérer cela est d'utiliser JavaScript.

Essayez ceci Inverser la couleur du texte d'un élément spécifique

Si vous faites cela avec css3, ce n'est compatible qu'avec les versions les plus récentes des navigateurs.