Par défaut, le fond d'une boîte (ie d'un élément) est constitué par la zone d'affichage, les marges internes et les bordures. Les marges externes ne font jamais partie du fond : elles sont toujours transparentes et si elles sont définies, elles laissent apparaître la couleur ou l'image de fond éventuelles de l'élément parent.
Tous les éléments HTML (qu'ils soient de type bloc ou en ligne) peuvent avoir une couleur de fond.
Définir la couleur de fond
La propriété background-color permet de définir la couleur de fond d'une boîte.
N'importe quelle façon de spécifier une couleur peut être utilisée avec cette propriété.
body { background-color: #212C19; }
h2 { background-color: rgb(77, 47, 113); }
.classe { background-color: rgb(30%, 18%, 44%); }
#identifiant { background-color: rgba(47, 38, 30, 0.75); }
div p { background-color: rgba(18%, 14%, 11%, 75%); }
li:nth-of-type(2n) { background-color: hsl(351, 26%, 23%); }
p { background-color: hsla(104, 15%, 8%, 0.7); }
div {background-color: darkred; }
Figure RVB
Complétez le code HTML et CSS pour obtenir le résultat suivant :
Les cercles ont un rayon de 50 pixels. La couleur de fond est une des trois couleurs primaires (rouge, vert, bleu) avec une transparence de 50%.
Une fois la figure obtenue, elle doit être placée au milieu de la page (et rester au milieu quand la page est redimensionnée).
Définir la zone de fond
Par défaut, la couleur de fond s'applique sur la zone de contenu, les marges internes et sous les bordures. Toutefois, la propriété background-clip permet de rédéfinir la zone ou s'applique la couleur (ou l'image) de fond. Cette propriété peut avoir 3 valeurs :
content-box: la couleur de fond s'applique uniquement sur la zone de contenu,padding-box: la couleur de fond s'applique sur la zone de contenu et les marges internes,border-box(par défaut) : la couleur de fond s'applique sur la zone de contenu, les marges internes et les bordures.
|
|
|