Voici les résultats de cet article :
Commençons!
Changer la couleur de l'image en CSS
Pour changer la couleur de l'image en CSS, renseignez-vous d'abord sur la propriété filter et ses fonctions. Vous gagnerez une meilleure compréhension de cette façon.
filtrer la propriété CSS
Pour contrôler l'effet visuel d'une propriété de filtre d'image de CSS est utilisée. Les effets visuels sont :
- se brouiller
- luminosité
- réglage des couleurs
- ombre portée
- opacité
Syntaxe de la propriété du filtre
La syntaxe de la propriété filter est :
filtre : se brouiller ( ) | ombre portée ( ) | opacité ( )- se brouiller(): utilisé pour appliquer un effet de flou sur l'image.
- ombre portée() : créer une ombre sur une image.
- opacité(): utilisé pour ajouter de la transparence à l'image.
Nous pouvons utiliser plusieurs filtres à l'aide de cette propriété de filtre. Cet article explique comment changer la couleur de l'image, nous allons donc expliquer ici comment utiliser les fonctions drop-shadow() et opacity() avec.
ombre portée()
drop-shadow() est une fonction intégrée de CSS qui permet de définir l'ombre de n'importe quel élément ou image. Les paramètres suivants sont utilisés dans la fonction drop-shadow() pour changer la couleur d'une image :
- décalage-x : Il est utilisé pour ajouter une ombre horizontale.
- décalage-y : Les ombres sont ajoutées verticalement à l'aide de ceci.
- Couleur: Les ombres sont colorées avec ce paramètre.
Pour clarifier ces points, passons à la syntaxe de drop-shadow :
ombre portée ( décalage-x décalage-y couleur )- décalage-x et décalage-y peuvent être positifs ou négatifs.
- En horizontal, une valeur positive est utilisée pour ajouter les effets sur le côté droit, et négative pour le côté gauche.
- En vertical, la valeur positive est pour le bas et la négative 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 à n'importe quelle image. La syntaxe de opacity() est :
opacité ( Numéro ) ;Ici ' Numéro ” je s utilisé pour définir le niveau d'opacité entre 0,0 et 1,0. Pour rendre une image entièrement transparente, vous pouvez la définir sur 0,0.
Pour clarifier les points mentionnés ci-dessus, passons à l'exemple.
Comment changer la couleur de l'image en CSS ?
Dans l'exemple ci-dessous, nous allons d'abord ajouter une image en utilisant la balise :
< image classer = 'image' src = 'image.jpg' tout = '' >
< / corps >
Avant d'appliquer la propriété filter, le résultat était le suivant :
Pour changer la couleur d'une image, passons au CSS et appliquons-lui la propriété filter. Nous allons régler 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 car nous ne voulons changer que la couleur d'une image.
.image {filtre : opacité ( 0,5 ) ombre portée ( 0 0 brun ) ;
}
Voici le résultat final après la mise en œuvre :
La couleur de l'image a été modifié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é filter. opacity() spécifie la transparence de l'image et drop-shadow() affecte la couleur et l'ombre à l'image. Cet article expliquait la méthode de changement de couleur d'une image à l'aide de CSS.