Comment puis-je inverser la couleur en utilisant 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 ? */
}

Est-il possible d'inverser la couleur p avec CSS?

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

Answer 1

Ajoutez la même couleur d’arrière-plan au paragraphe, puis inversez avec CSS:

div {
    background-color: #f00;
}

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

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

Answer 2

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, il est uniquement compatible avec les versions les plus récentes du navigateur.