Le "filtre«La propriété peut être utilisée pour appliquer divers effets visuels à une image, tels que la réflexion, la niveale des gris, le sépia, la sature, la teinte rotante et plus. La combinaison des fonctions connexes des effets visuels mentionnés dans la propriété du filtre modifiera la couleur d'une image. Ces fonctions utilisent des composants de couleur différents pour modifier la couleur de l'image.

Dans ce manuel, vous apprendrez à utiliser CSS pour changer la couleur d'une image en bleu.

Comment changer la couleur de l'image dans CSS?

Dans CSS, vous pouvez utiliser la propriété du filtre pour appliquer tout effet graphique à une image ou pour les fins du changement de couleur à un élément HTML. De plus, il peut être utilisé pour changer la couleur de l'image. Donc, d'abord, passez par la propriété du filtre et ses fonctions.

Propriété du filtre CSS

Pour contrôler l'effet visuel d'une image, la propriété filtrante de CSS sera utilisée. Ses effets visuels pris en charge sont:

• • ajustement des couleurs
  • se brouiller
  • secouer drop
  • luminosité
  • opacité

Syntaxe

Notre objectif est de changer la couleur d'une image en bleu en CSS en utilisant la propriété Filtre. Pour ce faire, nous suivrons la syntaxe donnée:

Filtre: sépia () | Hue-Rotate () | saturer()

La description des fonctions ci-dessus est:

• • sépia(): Il est utilisé pour convertir une image en une image sépia en lui donnant une apparence brunâtre / jaune.
  • Hue-Rotate (): Il est utilisé pour appliquer la rotation des teintes à l'image. Cette fonction accepte l'angle requis pour la rotation comme argument.
  • saturer(): Il est utilisé pour définir la saturation sur une image. Cette fonction accepte un pourcentage ou un nombre comme un argument représentant le montant de la conversion.

Pour clarifier les points susmentionnés, passons à l'exemple.

Voyons un exemple pour modifier la couleur d'une image en bleu en utilisant les fonctions de propriété du filtre mentionné.

Exemple: comment changer la couleur d'une image en bleu dans CSS?

Afin de modifier la couleur de l'image en bleu, spécifiez d'abord la source de l'image sélectionnée dans le fichier HTML.

Ici, nous avons ajouté une image à l'aide de la balise et réglé sa largeur sur «450px»:

Changez la couleur d'une image en bleu

Avant d'appliquer la propriété Filtre, notre page Web ressemblera à ceci:

Passez au CSS et appliquez la propriété du filtre pour changer la couleur d'une image en bleu.

Pour ce faire, nous définirons la valeur de Sepia (), Hue-Rotate () et Saturate () fonctionne comme «100%","190 degrés" et "900%" respectivement:

img
Filtre: sépia (100%) Hue-rotate (190 degrés) sature (900%);

Note: La séquence des fonctions ajoutées doit être la même que celle donnée. Dans le cas où vous modifiez la séquence spécifiée, alors l'image ne prendra pas l'effet requis.

Maintenant, enregistrez votre code et ouvrez le fichier HTML dans votre navigateur:

Exemple 2: Comment changer la couleur d'une image en bleu clair?

Afin de changer la couleur de l'image en bleu clair, les valeurs des fonctions sépia (), hue-rotate () et sature () seront modifiées.

Ici, nous ajouterons une autre image en utilisant la balise:

Changer la couleur d'une image en bleu clair

Maintenant, passez à la section CSS et appliquez le «filtre»Propriété à l'image ajoutée.

Ici, nous allons définir la valeur du sépia () comme «300%», Hue-rotate () comme«150 degrés"Et saturer () comme"450%»:

img
Filtre: sépia (300%) Hue rotate (150 degrés) sature (450%);

En conséquence, la couleur de l'image donnée sera changée en bleu clair.

Sortir

Nous avons couvert la méthode la plus simple pour changer la couleur d'une image en bleu dans CSS.

Conclusion

Pour changer la couleur d'une image en bleu, "sépia()","Hue-Rotate ()", et "saturer()«Fonctions du«filtre»La propriété est utilisée. La couleur de l'image change en fonction de la valeur donnée de la sépia (), des fonctions Hue-rotate () et sature (). En utilisant cela, vous pouvez définir les différentes couleurs de l'image, comme le bleu et le bleu clair. Comme nous l'avons expliqué dans cet article, la propriété du filtre CSS vous permet de changer la couleur d'une image en bleu.