Fonction invert

La fonction invert permet d'inverser les couleurs d'une image d'arrière-plan. La valeur 0 signifie que l'image reste inchangée. La valeur 100% ou 1 inverse complètement les couleurs de l'arrière-plan. Toute valeur comprise dans cet intervalle inverse partiellement les couleurs. Une valeur négative n'est pas autorisée. Par défaut, la valeur est 0.

Syntaxe

sélecteur {
	filter: invert(valeur);
}

Exemple

Inversons les couleurs de notre image jusqu'à la valeur 50% :

<div id="elem"></div>

#elem {
	filter: invert(50%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemple

Maintenant, inversons complètement les couleurs de notre image avec la valeur 100% :

<div id="elem"></div>

#elem {
	filter: invert(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemple

Maintenant, définissons la valeur de la fonction invert à 0 :

<div id="elem"></div>

#elem {
	filter: invert(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voir aussi

la fonction blur,
qui floute l'arrière-plan
la fonction brightness,
qui définit la luminosité de l'arrière-plan
la fonction contrast,
qui définit le contraste de l'arrière-plan
la fonction drop-shadow,
qui ajoute une ombre portée à l'arrière-plan
la fonction hue-rotate,
qui fait tourner la teinte de l'arrière-plan
la fonction opacity,
qui définit la transparence de l'arrière-plan
la fonction sepia,
qui convertit l'arrière-plan en sépia
la propriété background,
qui est une propriété raccourcie pour l'arrière-plan
la propriété background-image,
qui permet de définir une image d'arrière-plan pour un élément
la propriété filter,
qui définit un style pour l'arrière-plan