CSS Arrière-plans
Arrière-plans CSS
Les propriétés d'arrière-plan en CSS sont utilisées pour ajouter des effets d'arrière-plan aux éléments.
Dans ces chapitres, vous apprendrez 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)
background-color CSS
La propriété background-color spécifie la couleur d'arrière-plan d'un élément.
Exemple
La couleur d'arrière-plan d'une page se définit 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 RGB - comme "rgb(255,0,0)"
Consultez 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 pour n'importe quel élément 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 propriété opacity spécifie l'opacité ou la transparence d'un élément. Elle peut prendre une valeur de 0.0 à 1.0. Plus la valeur est basse, plus l'élément est transparent :
opacité 1
opacité 0.6
opacité 0.3
opacité 0.1
Exemple
div {
background-color: green;
opacity: 0.3;
} Remarque : Lorsque vous utilisez la propriété opacity 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 utilisant RGBA
Si vous ne souhaitez pas appliquer l'opacité aux éléments enfants, comme dans notre exemple ci-dessus, utilisez des valeurs de couleur RGBA . L'exemple suivant définit l'opacité pour la couleur d'arrière-plan et non pour le texte :
100% d'opacité
60% d'opacité
30% d'opacité
10% d'opacité
Vous avez appris dans notre Chapitre sur les couleurs CSS que vous pouvez utiliser RGB comme valeur de couleur. En plus de RGB, vous pouvez utiliser une valeur de couleur RGB avec un canal alpha (RGB A ) - qui spécifie l'opacité pour 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).
Astuce : Vous en apprendrez plus sur les couleurs RGBA dans notre Chapitre sur les couleurs CSS .
Exemple
div {
background: rgba(0, 128, 0, 0.3) /* Arrière-plan vert avec 30% d'opacité */
} La propriété de couleur d'arrière-plan CSS
| Propriété | Description |
|---|---|
| background-color | Définit la couleur d'arrière-plan d'un élément |