Les feuilles de style en cascade (CSS) offrent de nombreuses fonctionnalités permettant de concevoir de beaux sites web. L’une des fonctionnalités les plus élémentaires est la possibilité d’ajouter une image d’arrière-plan. Pour rendre l’image d’arrière-plan plus attrayante, les utilisateurs peuvent ajuster l’opacité de l’image.
Dans cet article, nous allons voir comment modifier l’opacité d’une image d’arrière-plan CSS.
L’opacité fait référence au niveau de transparence d’un élément. Un élément ayant une opacité de 1 est complètement opaque, tandis qu’un élément ayant une opacité de 0 est complètement transparent. Pour modifier l’opacité d’une image d’arrière-plan CSS, nous pouvons utiliser la propriété « opacity ». Cependant, cette propriété n’affecte que l’opacité de l’élément auquel elle s’applique, et non l’image d’arrière-plan elle-même.
Pour modifier l’opacité d’une image d’arrière-plan CSS, nous devons utiliser une autre propriété appelée « background-color ». Cette propriété nous permet de définir une couleur d’arrière-plan pour un élément et d’ajuster son opacité. Lorsque nous attribuons une couleur d’arrière-plan à un élément, la couleur se fond avec l’image d’arrière-plan, ce qui donne l’apparence d’une image partiellement transparente.
Voyons étape par étape comment modifier l’opacité d’une image d’arrière-plan CSS :
Étape 1 : Définir une couleur d’arrière-plan
La première étape consiste à définir une couleur d’arrière-plan pour l’élément qui contient l’image d’arrière-plan. Nous pouvons utiliser la propriété « background-color » pour définir la couleur. Par exemple :
.container
{
background-color : rgba(255,255,255,0.5);
}Dans cet exemple, nous avons défini la couleur d’arrière-plan de l’élément container en blanc avec une opacité de 0,5 en utilisant la fonction de couleur « rgba ». Les trois premières valeurs de la fonction représentent les valeurs rouge, verte et bleue de la couleur, tandis que la dernière valeur représente l’opacité. Ici, nous avons fixé l’opacité à 0,5, ce qui rend la couleur partiellement transparente.
Étape 2 : Ajouter l’image d’arrière-plan
Une fois la couleur d’arrière-plan définie, nous pouvons ajouter l’image d’arrière-plan par-dessus. Nous pouvons utiliser la propriété « background-image » pour ajouter l’image. Voici un exemple :
.container
{
background-color : rgba(255,255,255,0.5);
background-image : url('image.jpg') ;
}Ici, nous avons ajouté l’image de fond « image.jpg » à l’élément container. L’image apparaîtra au-dessus de la couleur d’arrière-plan blanche que nous avons définie à l’étape précédente.
Étape 3 : Ajuster l’opacité de l’image d’arrière-plan
Maintenant que nous avons défini la couleur d’arrière-plan et ajouté l’image, nous pouvons ajuster l’opacité de l’image d’arrière-plan. Pour ce faire, nous ajustons l’opacité de la couleur d’arrière-plan que nous avons définie précédemment. Par exemple :
.container
{
background-color : rgba(255,255,255,0.5);
background-image : url('image.jpg') ;
}
.container:hover
{
background-color: rgba(255,255,255,0.2);
}Dans cet exemple, nous avons fixé l’opacité de la couleur d’arrière-plan à 0,5 dans l’état initial. Lorsque nous survolons l’élément conteneur, nous modifions l’opacité de la couleur d’arrière-plan à 0,2 à l’aide du sélecteur de pseudo-classe « :hover ». Cela nous donne l’apparence d’une image d’arrière-plan partiellement transparente.
Étape 4 : Expérimenter différentes valeurs
Enfin, nous pouvons expérimenter différentes valeurs de la fonction « rgba » pour obtenir le niveau d’opacité souhaité. Nous pouvons ajuster la valeur d’opacité de 0 à 1, 0 étant complètement transparent et 1 étant complètement opaque. En voici un exemple :
.container
{
background-color: rgba(255,255,255,0.5);
background-image : url('image.jpg') ;
}
.container:hover
{
background-color: rgba(255,255,255,0.8);
}Dans cet exemple, nous avons fixé l’opacité de la couleur d’arrière-plan à 0,5 dans l’état initial et à 0,8 lorsque l’élément conteneur est survolé.
A travers cet article vous aurez pu remarqué que modifier l’opacité d’une image d’arrière-plan CSS est un processus simple qui peut grandement améliorer l’aspect visuel d’un site web. En utilisant la propriété « background-color » et en ajustant son opacité, nous pouvons obtenir l’effet d’une image d’arrière-plan partiellement transparente. Cela nous permet d’expérimenter différents niveaux de transparence et d’obtenir l’effet désiré.