Comment changer la couleur de l'image dans CSS

La combinaison des fonctions d'opacité () et de drop shadow () dans la propriété filtrante modifiera la couleur d'une image dans CSS. La propriété filtrante peut être utilisée pour appliquer divers effets à une image, telles que les réflexions, les niveaux de gris, le sépia, les ombres et plus. Ces fonctions utilisent des composants de couleur différents pour modifier la couleur de l'image. Dans ce manuel, vous acquérerez une connaissance de la façon d'utiliser CSS pour changer la couleur d'une image.

Voici les résultats de cet article:

• propriété de filtre
• drop shadow ()
• opacité()

Commençons!

Changer la couleur de l'image dans CSS

Pour changer la couleur de l'image dans CSS, découvrez d'abord la propriété du filtre et ses fonctions. Vous obtiendrez une meilleure compréhension de cette façon.

Filtre la propriété CSS

Pour contrôler l'effet visuel d'une propriété de filtre d'image de CSS est utilisé. Les effets visuels sont:

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

Syntaxe de la propriété filtrante

La syntaxe de la propriété du filtre est:

Filtre: blur () | drop-shadow () | opacité()

• se brouiller(): utilisé pour appliquer un effet flou sur l'image.
• Drop-shadow (): Créez une ombre sur une image.
• opacité(): utilisé pour ajouter de la transparence à l'image.

Nous pouvons utiliser plusieurs filtres en utilisant cette propriété de filtre. Cet article explique comment changer la couleur de l'image, donc nous allons ici expliquer comment utiliser Drop-Shadow (), et Opacity () fonctionne avec lui.

drop shadow ()

Drop-Shadow () est une fonction intégrée de CSS qui permet de définir l'ombre à n'importe quel élément ou image. Les paramètres suivants sont utilisés dans la fonction Drop-Shadow () pour modifier la couleur d'une image:

• Offset-X: Il est utilisé pour ajouter une ombre horizontale.
• Offset-y: Les ombres sont ajoutées verticalement en utilisant ce.
• couleur: Les ombres sont colorées avec ce paramètre.

Pour clarifier ces points, passons à la syntaxe de Drop Shadow:

Drop-shadow (couleurs offset-y offset-x)

• Offset-X et Offset-y peuvent être positifs ou négatifs.
• En horizontal, une valeur positive est utilisée pour ajouter les effets du côté droit, et le négatif est pour le côté gauche.
• En vertical, la valeur positive est pour le côté inférieur, et le négatif est pour le haut.
• À la place de la couleur, vous pouvez attribuer n'importe quelle couleur que vous souhaitez donner à l'image.

opacité()

Opacity () est utilisé pour ajouter de la transparence à un élément ou à toute image. La syntaxe de l'opacité () est:

opacité (numéro);

Ici "nombre" jes utilisé pour définir le niveau d'opacité entre 0.0 à 1.0. Pour rendre une image entièrement transparente, vous pouvez la définir comme 0.0.

Pour clarifier ci-dessus les points de mention, passons à l'exemple.

Comment changer la couleur de l'image dans CSS?

Dans l'exemple ci-dessous, nous allons d'abord ajouter une image à l'aide de la balise:

Avant d'appliquer la propriété du filtre, le résultat était comme ceci:

Pour changer la couleur d'une image, passons au CSS et appliquons la propriété du filtre. Nous allons définir l'opacité à 0.5 pour la transparence de l'image. Dans la fonction Drop-Shadow (), la valeur de Offset-X et Offset-y est 0 parce que nous voulons seulement changer la couleur d'une image.

.image
Filtre: opacité (0.5) Drop Shadow (0 0 Brown);

Voici le résultat final après la mise en œuvre:

La couleur de l'image a été changée avec succès.

Conclusion

Pour modifier la couleur d'une image, deux fonctions CSS: Opacity () et Drop-Shadow () sont utilisées avec la propriété Filtre. Opacity () spécifie la transparence de l'image et Drop-Shadow () attribue la couleur et l'ombre à l'image. Cet article a expliqué la méthode de modification de la couleur d'une image à l'aide de CSS.