Changer la couleur de l'image en CSS

1. Utilisez la propriété filter pour modifier la couleur de l’image en CSS
2. Utilisez les fonctions opacity() et drop-shadow() dans la propriété filter pour modifier la couleur de l’image en CSS

Cet article présentera quelques méthodes pour changer la couleur de l’image dans CSS.

Utilisez la propriété filter pour modifier la couleur de l’image en CSS

La propriété filter définit la superposition d’une image en CSS.

Nous pouvons appliquer des effets visuels et graphiques dans une image en utilisant la propriété filter. Par exemple, nous pouvons flouter une image, modifier le contraste et la luminosité, appliquer un effet d’ombre, de la saturation, des niveaux de gris et de l’opacité avec la propriété filter.

Il existe une variété d’options que nous pouvons appliquer aux images avec la propriété filter. La syntaxe de la propriété filter est indiquée ci-dessous.

filter: none | brightness() | greyscale () | contrast () | opacity () | saturate ();

Nous pouvons utiliser les valeurs % pour définir les options ci-dessus. La valeur inférieure aura moins d’effet sur l’image et vice versa.

Nous pouvons également utiliser la valeur décimale au lieu de la valeur en pourcentage. Par exemple, on peut écrire 0.8 pour 80%.

Maintenant, regardons les exemples des différents filtres.

Par exemple, insérez une image avec l’URL https://loremflickr.com/320/240 six fois à l’aide de la balise img et définissez les classes brightness, blur, saturate, grayscale et contrast à la balise img, comme le montre l’exemple ci-dessous. En CSS, sélectionnez la balise img et définissez la width sur 25% et la propriété float sur left.

Ensuite, sélectionnez la classe brightness et utilisez la propriété filter pour définir la luminosité sur 1.25. De même, sélectionnez les classes respectives et réglez blur à 2px, saturate à 300%, grayscale à 200% et contrast à 60% selon la classe.

Ici, la première image est l’image d’origine, et le reste contient les filtres. Ainsi, nous pouvons utiliser la propriété filter pour changer la couleur de l’image en CSS.

Exemple de code :

<img src="/img/DelftStack/logo.png" />
<img class="brightness" src="/img/DelftStack/logo.png" />
<img class="blur" src="/img/DelftStack/logo.png" />
<img class="saturate" src="/img/DelftStack/logo.png" />
<img class="grayscale" src="/img/DelftStack/logo.png" />
<img class="contrast" src="/img/DelftStack/logo.png" />

img {
 width:25%;
 float:left;  
}

.brightness { filter: brightness(1.25); }
.blur { filter: blur(2px); }
.saturate { filter: saturate(300%); }
.grayscale { filter: grayscale(200%); }
.contrast { filter: contrast(60%); }

Utilisez les fonctions opacity() et drop-shadow() dans la propriété filter pour modifier la couleur de l’image en CSS

On peut changer la couleur de l’image en CSS en combinant les fonctions opacity() et drop-shadow() dans la propriété filter. Nous pouvons fournir la couleur de l’ombre à partir de la fonction drop-shadow, et nous pouvons définir l’ombre aussi fine que possible afin que la couleur de l’image ne change que sans former une ombre réelle.

L’opacité donnera une couleur plus visible à l’image. Nous pouvons spécifier l’ombre horizontale, l’ombre verticale, le rayon de flou, la valeur d’étalement et la couleur avec la fonction drop-shadow.

Par exemple, insérez une image HTML, sélectionnez la balise img dans CSS et appliquez-lui la propriété filter. Dans la propriété filter, définissez opacity sur 0.4. Ensuite, définissez la valeur 0 0 0 rouge comme paramètre de la fonction drop-shadow.

Ici, nous définissons la valeur 0 pour les ombres horizontales et verticales. En conséquence, une ombre se trouve directement derrière l’image.

La valeur 0 du flou rendra également l’image plus nette sur les bords. Cependant, la couleur rouge sera appliquée à l’ombre, et l’image sera rougeâtre.

De cette façon, nous pouvons combiner les fonctions opacity() et drop-shadow() dans la propriété filter pour changer la couleur de l’image en CSS.

Exemple de code :

<img src="/img/DelftStack/logo.png" />

img{
filter: opacity(0.4) drop-shadow(0 0 0 red); 
}