Assombrir l'image de fond en CSS

1. Utilisez le dégradé linéaire pour assombrir l’image d’arrière-plan dans CSS
2. Utilisez la propriété background-blend-mode pour assombrir l’image d’arrière-plan en CSS

Dans cet article, nous allons présenter quelques méthodes pour assombrir les images d’arrière-plan en CSS.

Utilisez le dégradé linéaire pour assombrir l’image d’arrière-plan dans CSS

Nous pouvons utiliser le dégradé linéaire CSS pour assombrir l’image d’arrière-plan en CSS. La fonction linear-gradient() crée un fond avec un dégradé linéaire. Un dégradé linéaire est une transition en douceur entre au moins deux couleurs différentes. La fonction prend un nombre incalculable de paramètres de couleur. Nous pouvons définir la direction du gradient comme premier paramètre. Les options des directions sont à droite, à gauche, en bas à droite, 90deg, etc. Nous pouvons appliquer le dégradé linéaire à l’image de fond et définir la couleur plus foncée avec opacité pour assombrir l’image de fond . Nous pouvons utiliser la fonction rgba() dans la fonction linear-gradient() pour définir les couleurs. Ici, nous allons seulement assombrir l’image de fond sans assombrir les autres éléments.

Par exemple, sélectionnez le conteneur dans CSS et utilisez la propriété abrégée background pour définir le dégradé linéaire et l’image d’arrière-plan. Écrivez la fonction linear-gradient() et donnez les deux arrêts de couleur comme rgba(0, 0, 0, 0.7). Ensuite, utilisez la fonction url() pour définir une image de fond de votre choix. Utilisez les différentes propriétés d’arrière-plan pour placer correctement l’image en arrière-plan. Réglez background-position sur center, background-repeat sur no-repeat et background-size sur cover. Réglez la hauteur sur 100%. Assurez-vous de sélectionner les balises body et html et définissez la hauteur sur 100% et la marge sur 0.

Dans l’exemple ci-dessous, nous avons utilisé rgba(0, 0, 0, 0.7) comme deux arrêts de couleur. La fonction rgba(0, 0, 0) équivaut à la couleur noire. La quatrième valeur est la valeur de l’opacité. La valeur plus proche de 1 le rend plus sombre et vice versa. Nous pouvons ajuster la valeur d’opacité en fonction du besoin d’assombrir l’image de fond. De cette façon, nous pouvons utiliser le dégradé linéaire pour assombrir l’image de fond en CSS.

Exemple de code :

<div id="background"></div>

body, html {
    height: 100%;
    margin: 0;
}

#background {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Utilisez la propriété background-blend-mode pour assombrir l’image d’arrière-plan en CSS

Nous pouvons utiliser la propriété background-blend-mode pour assombrir l’image de fond en CSS. La propriété définit le mode de fusion de l’arrière-plan. Il existe différentes options pour cette propriété. Certaines options sont normal, multiply, darken, lighten, saturation etc. Nous pouvons utiliser l’option assombrir pour assombrir l’image de fond. Nous pouvons définir la couleur de l’image de fond à l’aide de la fonction rgba().

Par exemple, sélectionnez l’identifiant background dans CSS et utilisez la propriété background pour définir la couleur et l’image de fond. Définissez la couleur sur rgba(0, 0, 0, 0.7) et utilisez une image d’espace réservé dans la fonction url(). Utilisez les différentes propriétés d’arrière-plan comme dans la première méthode pour définir correctement l’image. Ensuite, utilisez la propriété background-blend-mode et réglez-la sur darken.

De cette façon, nous pouvons assombrir l’image de fond en utilisant la propriété background-blend-mode.

Exemple de code :

#background {
    background: rgba(0, 0, 0, 0.7) url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: darken;
}

<div id="background"></div>