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

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

Exemple

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

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

css#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 :

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

css#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 :

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

css#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