CSS Arrière-plans
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-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground(shorthand property)
CSS background-color
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 est définie comme ceci :
body {
background-color: lightblue;
}
Try it Yourself »
Avec CSS, une couleur est le plus souvent spécifiée par :
- un nom de couleur valide - comme "red"
- une valeur HEX - comme "#ff0000"
- une valeur RGB - comme "rgb(255,0,0)"
Consultez 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 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;
}
Try it Yourself »
Opacity / Transparency (Opacité / Transparence)
La propriété opacity spécifie l'opacité/transparence d'un élément. Sa valeur peut être comprise entre 0,0 et 1,0. Plus la valeur est faible, plus la transparence est élevée.
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
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 totalement transparent difficile à lire.
Transparence utilisant RGBA
Si vous ne souhaitez pas appliquer d'opacité aux éléments enfants, comme dans l'exemple ci-dessus, utilisez les valeurs de couleur RGB. L'exemple suivant définit l'opacité de la couleur d'arrière-plan, et non du texte :
100% opacity
60% opacity
30% opacity
10% opacity
Vous avez appris dans notre chapitre sur les couleurs CSS que vous pouvez utiliser le RVB comme valeur de couleur. Outre le RVB, vous pouvez utiliser une valeur de couleur RVB avec un canal alpha (RGBA), qui spécifie l'opacité d'une couleur.
Une valeur de couleur RGBA est spécifiée avec : rgba(rouge, vert, bleu, alpha). Le paramètre alpha est un nombre compris entre 0,0 (transparent) et 1,0 (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) /* Fond vert avec 30% d'opacité */
}
Try it Yourself »
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 |
CSS — Couleurs d'arrière-plan — Vidéo W3Schools
Cette vidéo est une introduction aux couleurs d'arrière-plan en CSS.
Une partie d'une série de tutoriels vidéo pour apprendre CSS pour les débutants !
