Superposer l'image avec la couleur en CSS

1. Utilisez la fonction rgba() pour superposer l’image d’arrière-plan avec la couleur en CSS
2. Utilisez la fonction linear-gradient pour superposer l’image d’arrière-plan avec un dégradé en CSS
3. Utilisez la propriété background-blend-mode pour superposer l’image d’arrière-plan avec un dégradé en CSS

Cet article présentera quelques méthodes pour superposer une image avec de la couleur en CSS.

Utilisez la fonction rgba() pour superposer l’image d’arrière-plan avec la couleur en CSS

Nous pouvons utiliser la fonction rgba() pour créer une superposition de couleurs sur une image. Nous pouvons utiliser la fonction comme valeur de la propriété background.

La syntaxe de la fonction rgba() ressemble à ceci.

rgba(red, green, blue, opacity);

Ici, la couleur rouge, verte et bleue est réglée sur une valeur entre 0-255 et une opacité allant de 0-1. Si la valeur d’opacité est définie sur 0, alors il est complètement transparent, et si la valeur d’opacité est définie sur 1, il sera complètement opaque.

Nous pouvons créer une superposition simplement en ajoutant une couleur au-dessus d’une image, en diminuant son opacité.

Par exemple, créez une balise div et attribuez-lui un identifiant main. Ensuite, créez un div à l’intérieur de l’en-tête et donnez-lui une classe overlay.

Ensuite, créez un paragraphe p et écrivez du texte. En CSS, définissez l’image d’arrière-plan sur l’identifiant main tel que background: url("") no-repeat fixed.

La propriété background-repeat est no-repeat, et la propriété background-position est fixed. Ensuite, donnez à la div la hauteur de 100% pour ajuster sa hauteur en fonction du contenu.

Donnez à la propriété overflow la valeur hidden pour masquer le contenu qui déborde du conteneur. Définissez également la propriété color sur white pour rendre le texte plus visible.

Enfin, définissez la propriété position sur absolute.

Ensuite, nous devons créer une superposition en stylisant la div overplay. Donnez-lui une couleur d’arrière-plan avec une opacité telle que background: rgba(50, 70, 80, 0.7);.

Définissez la propriété height à 100% pour correspondre à la hauteur de son élément parent. Définissez la propriété overflow de div sur hidden comme ci-dessus.

L’exemple ci-dessous montre que le div avec le nom de classe overlay apparaît sur le div main. Comme le div a une couleur de fond transparente, l’image de fond est visible.

Exemple de code :

<div id="main">
 <div class="overlay">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 </p>
 </div>
</div>

#main {
 background: url("/img/DelftStack/logo.png") no-repeat fixed;
 height: 100%;
 overflow: hidden;
 color: #FFFFFF;
 position: absolute;
}

.overlay {
 background: rgba(50, 70, 80, 0.7);
 overflow: hidden;
 height: 100%;
}

Utilisez la fonction linear-gradient pour superposer l’image d’arrière-plan avec un dégradé en CSS

Un dégradé linéaire est une fonction CSS qui crée une image colorée d’une transition progressive entre deux ou plusieurs couleurs le long d’une ligne droite. Différentes couleurs sont mélangées et différentes directions pour créer un motif coloré.

Nous pouvons utiliser linear-gradient comme couleur d’arrière-plan, et il peut également être utilisé comme superposition d’image. Cependant, pour l’utiliser comme superposition d’image, nous devons l’utiliser avec l’image de fond.

Les couleurs avec une opacité plus faible doivent être en dégradé linéaire pour rendre visible l’image d’arrière-plan.

Le premier paramètre de la fonction linear-gradient est la direction du gradient. Après cela, nous pouvons spécifier les arrêts de couleur en fonction de nos besoins.

Par exemple, créez un div avec un identifiant main. Sélectionnez l’identifiant dans CS et définissez la hauteur et la largeur du conteneur sur 100vh et 100%.

Définissez ensuite le dégradé linéaire et l’image d’arrière-plan à l’aide de la propriété abrégée background. Écrivez la propriété linear-gradient et utilisez la direction vers la droite comme premier paramètre.

Ensuite, utilisez la fonction rgba() pour spécifier le dégradé. Écrivez rgba(50, 70, 80, 0.7) comme premier arrêt de couleur et ajoutez rgba(30, 20, 150, 0.7) comme deuxième arrêt de couleur.

Après la fonction linear-gradient, utilisez url() pour insérer l’image et les options no-repeat et fixed pour l’image de fond.

Ici, nous avons utilisé deux couleurs en linear-gradient avec une opacity de 0.7 dans chaque couleur. La valeur to right dans le linear-gradient indique le motif ou la direction de la couleur.

Cela signifie que le côté gauche du conteneur contient la couleur rgba(50, 70, 80, 0.7), et progressivement la couleur passe à rgba(30, 20, 150, 0.7) tout en se déplaçant vers la droite.

L’exemple ci-dessous montre que le linear-gradient fournit une superposition d’image, qui comprend deux couleurs différentes se déplaçant de gauche à droite en raison de la transparence de la couleur utilisée dans linear-gradient.

Exemple de code :

<div id="main">
</div>

#main {
 height: 100vh;
 width: 100%;
 background: linear-gradient(to right, rgba(50, 70, 80, 0.7), rgba(30, 20, 150, 0.7)), url("/img/DelftStack/logo.png") no-repeat fixed;
}

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

La propriété background-blend-mode définit la façon dont les images d’arrière-plan d’un élément doivent se fondre avec la couleur d’arrière-plan de l’élément. La propriété prend des valeurs comme lighten, darken, multiply, saturation, overlay, soft-light, color-dodge, hard-light etc.

La propriété background-blend-mode fusionne la background-color avec la background-image. La valeur par défaut de la propriété background-blend-mode est normal.

Nous pouvons utiliser la propriété pour fournir une superposition à l’image d’arrière-plan. Nous pouvons utiliser la propriété background-blend-mode après avoir défini l’image d’arrière-plan.

Par exemple, créez un div en HTML. En CSS, définissez l’image de fond à l’aide de la fonction url() et définissez les valeurs no-repeat et fixed dans la propriété background.

Ensuite, réglez la hauteur à 100vh pour la div. Appliquez la valeur hidden à la propriété overflow.

De même, définissez la propriété background-color avec la valeur rgba(50, 70, 80, 0.7). Enfin, utilisez le background-blend-mode et réglez sa valeur sur soft-light pour ajouter un effet de superposition à l’image d’arrière-plan.

Exemple de code :

<div id="main">
</div>

 #main {
 background: url("/img/DelftStack/logo.png") no-repeat fixed;
 height: 100vh;
 overflow: hidden;
 background-color: rgba(50, 70, 80, 0.7);
 background-blend-mode: soft-light;
}