Arrière- plans CSS
Les propriétés d'arrière-plan CSS sont utilisées pour ajouter des effets d'arrière-plan aux éléments.
Dans ces chapitres, vous découvrirez les propriétés d'arrière-plan CSS suivantes :
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(propriété abrégée)
Couleur d'arrière-plan CSS
La background-colorpropriété spécifie la couleur d'arrière-plan d'un élément.
Exemple
La couleur de fond d'une page est définie comme suit :
body {
background-color: lightblue;
}
Avec CSS, une couleur est le plus souvent spécifiée par :
- un nom de couleur valide - comme "rouge"
- une valeur HEX - comme "#ff0000"
- une valeur RVB - comme "rgb(255,0,0)"
Regardez les valeurs de couleur CSS pour une liste complète des valeurs de couleur possibles.
Autres éléments
Vous pouvez définir la couleur d'arrière-plan de tous les éléments HTML :
Exemple
Ici, les éléments <h1>, <p> et <div> auront des couleurs d'arrière-plan différentes :
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
Opacité / Transparence
La opacitypropriété spécifie l'opacité/transparence d'un élément. Il peut prendre une valeur comprise entre 0,0 et 1,0. Plus la valeur est faible, plus la transparence est grande :
opacité 1
opacité 0.6
opacité 0.3
opacité 0.1
Exemple
div {
background-color: green;
opacity: 0.3;
}
Remarque : Lorsque vous utilisez la opacitypropriété pour ajouter de la transparence à l'arrière-plan d'un élément, tous ses éléments enfants héritent de la même transparence. Cela peut rendre le texte à l'intérieur d'un élément entièrement transparent difficile à lire.
Transparence avec RGBA
Si vous ne souhaitez pas appliquer d'opacité aux éléments enfants, comme dans notre exemple ci-dessus, utilisez les valeurs de couleur RVBA . L'exemple suivant définit l'opacité de la couleur d'arrière-plan et non celle du texte :
100% opacité
60% d'opacité
30% d'opacité
10% d'opacité
Vous avez appris dans notre chapitre sur les couleurs CSS que vous pouvez utiliser RVB comme valeur de couleur. En plus de RVB, vous pouvez utiliser une valeur de couleur RVB avec un canal alpha (RVB A ) - qui spécifie l'opacité d'une couleur.
Une valeur de couleur RGBA est spécifiée avec : rgba(red, green, blue, alpha ). Le paramètre alpha est un nombre compris entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque).
Conseil : vous en apprendrez plus sur les couleurs RGBA dans notre chapitre sur les couleurs CSS .
Exemple
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}