Appliquer un filtre couleur sur une image en background en CSS

Pour modifier l’apparence d’une image, afin qu’elle s’harmonise avec le design d’un site, ou pour améliorer la lisibilité d’un texte, nous avons 2 possibilités :

1. la modifier directement sur un logiciel de retouche d’images
2. utiliser le CSS → c’est cette solution que nous allons voir là !

Supperposer un dégradé à une image

L’idée est très simple : on utilise la propriété background-image pour supperposer un dégradé de couleurs par dessus une image.

Imaginons une section à laquelle nous appliquons cette image en fond :

L’objectif va être, par dessus cette image, appliquer un dégradé d’un rouge vers du bleu.

Mais attention, on souhaite voir l’image sous le dégradé, ce qui signifie que nous devons utiliser des couleurs rgba avec une opacité inférieure à 1, sans quoi nous ne pourrons pas voir l’image sous le dégradé faisant office de filtre…

#fond {
	background-image: 
      linear-gradient(
        rgba(181, 112, 112, 0.6), 
        rgba(112, 122, 181, 0.6)
      ),
      url("https://images.unsplash.com/photo-1552840687-b25e05d08047?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
}

Au niveau du linear-gradient, vous pouvez renseigner la direction et le nombre de couleurs que vous souhaitez. Vous pouvez également cumuler plusieurs dégradés sur l’image (si vous souhaitez par exemple qu’une zone en particulier soit plus claire ou plus sombre en plus du dégradé de couleurs !), il suffit de les séparer d’une virgule.

Et si je ne veux pas un dégradé de couleurs ?

Vous pourriez aussi simplement vouloir appliquer un filtre blanc ou noir sur votre fond, ou bien d’une couleur précise sans forcément avoir un dégradé de plusieurs couleurs. Pour cela, il suffit donc de faire un dégradé d’une couleur…vers cette même couleur !

#fond {
	background-image: 
      linear-gradient(
        rgba(0, 0, 0, 0.3), 
        rgba(0, 0, 0, 0.3)
      ),  /*Applique un filtre noir sur l'image*/
      url("https://images.unsplash.com/photo-1552840687-b25e05d08047?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
}

Grâce à cette astuce, vous allez pouvoir changer l’âme de vos photos de fond, sans même avoir à les retoucher sur un logiciel !

En découvrir davantage sur le CSS ?

Nous proposons 2 formations de 3 mois permettant de découvrir et de s’exercer à l’intégration web : Développeur Web ou UI-UX Designer.

Articles qui pourraient vous intéresser

Créer un menu mobile avec CSS et JavaScript

Créer un bouton avec un angle coupé

À quoi sert la propriété CSS z-index ? Et comment l’utiliser ?