Fonction hue-rotate

La fonction hue-rotate permet de modifier la chromaticité de l'image d'arrière-plan en faisant tourner la teinte sur le cercle chromatique. Les valeurs de la propriété sont indiquées en degrés, représentant l'angle du cercle chromatique. La valeur 0 ou 360 signifie que l'image reste inchangée, et tout nombre situé à l'intérieur de cette plage entraîne un changement de teinte de l'arrière-plan. Par défaut, la valeur est 0deg.

Syntaxe

sélecteur {
	filter: hue-rotate(angle);
}

Exemple

Définissons une chromaticité de 150deg pour notre image :

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

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

Exemple

Maintenant, définissons la chromaticité de l'image sur 50deg :

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

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

Exemple

Ne spécifions aucune valeur pour la propriété hue-rotate :

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

#elem {
	filter: hue-rotate();
	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 invert,
qui inverse les couleurs 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 bloc
la propriété filter,
qui définit le style de l'arrière-plan