Différentes méthodes pour assombrir l'image d'arrière-plan dans CSS

Sans aucun doute, les images d'arrière-plan améliorent l'apparence d'une page Web. Cependant, si les images ajoutées sont très brillantes et ont des effets multicolores, ils peuvent rendre une page peu attrayante et l'utilisateur se sentira inconfortable. Dans un scénario similaire, la plus belle option est d'assombrir les images ajoutées.

Devez-vous télécharger les images et les modifier dans Photoshop? Absolument pas! Différentes propriétés CSS peuvent vous servir à des fins spécifiées.

Dans cet article, nous expliquerons les différentes méthodes pour assombrir les images d'arrière-plan en utilisant CSS.

Comment assombrir l'image d'arrière-plan dans CSS?

Découvrez les propriétés ci-dessous pour assombrir les images d'arrière-plan à l'aide de CSS.

• propriété de filtre
• propriété de fond
• propriété en mode mélange d'arrière-plan

Explorons chaque méthode une par une!

Méthode 1: Utilisez la propriété «filtre» pour assombrir l'image d'arrière-plan dans CSS

Dans CSS, le «filtre»La propriété est utilisée pour ajouter des effets graphiques sur les éléments HTML, en particulier sur les images. Cette propriété peut également aider à assombrir l'image de fond lorsque c'est «luminosité"La valeur est ajoutée.

Regardez l'exemple donné pour vérifier la procédure pour assombrir l'image d'arrière-plan à l'aide de la propriété du filtre CSS.

Exemple

Dans cet exemple, nous assombrirons l'image d'arrière-plan suivante:

Dans la première étape, nous utiliserons le «arrière-plan«Propriété avec la valeur»URL ()«Pour définir l'image d'arrière-plan; déclarant le «sans répétition"Ne laissera pas l'image se répéter plusieurs fois. Alors, "rembourrage" de "15%"Sera utilisé pour donner l'espace spécifique à notre conteneur. Enfin, en utilisant le «filtre«Property et définir sa valeur sur«luminosité (40%)»Réduira la lumière versant sur l'image et la fera s'assombrir:

Enregistrez le code ajouté dans le fichier HTML et ouvrez-le simplement dans le navigateur ou utilisez le «Serveur en direct”Extension dans le même but:

Comme vous pouvez le voir, l'image d'arrière-plan a été assombrie à l'aide de la propriété du filtre CSS:

Méthode 2: Utilisez la propriété «d'arrière-plan» pour assombrir l'image d'arrière-plan dans CSS

Le "arrière-plan»La propriété peut être utilisée pour définir l'image d'arrière-plan, sa couleur, sa taille et sa position sur la page Web. En d'autres termes, en utilisant une propriété d'arrière-plan, vous pouvez appliquer presque toutes les propriétés d'une image d'arrière-plan à la fois.

Exemple

Nous allons maintenant utiliser le «arrière-plan«Propriété avec la valeur»gradient linéaire()»Et placez deux valeurs avec le schéma de couleurs RGBA à l'intérieur. Cela créera une nuance de transparence grise sur l'image et la fera s'assombrir:

Sortir

Maintenant, découvrez la propriété en mode de mélange d'arrière-plan dans la méthode suivante.

Méthode 3: Utilisez la propriété «Blend-Mode» pour assombrir l'image d'arrière-plan dans CSS

Le "mode mélange d'arrière-plan«La propriété est utile lorsque la couleur et une image existent ensemble au même endroit. Cette propriété est utilisée pour mélanger les couches d'images avec la couleur d'arrière-plan. De plus, il assombrira l'image d'arrière-plan avec une valeur spécifique.

Exemple

Tout d'abord, définissez la couleur d'arrière-plan "gris"Pour le conteneur à l'aide du"Couleur de l'arrière plan" propriété. À l'étape suivante, utilisez la valeur "multiplier"Le long de la propriété"mode mélange d'arrière-plan". Cela mélangera l'image et mélangera son calque avec l'arrière-plan: