Arrière-plan CSS

Les propriétés de fond CSS sont utilisées pour définir l'effet de fond de l'élément.

Dans ces chapitres, vous apprendrez les propriétés CSS de fond suivantes :

  • couleur de fond
  • image de fond
  • répétition de fond
  • attachement de fond
  • position de fond

CSS couleur de fond

couleur de fond L'attribut spécifie la couleur de fond de l'élément.

Exemple

La couleur de fond de la page est définie comme suit :

body {
  couleur de fond : lightblue;
}

Essayez-le vous-même

Par le biais de CSS, la couleur est généralement spécifiée de la manière suivante :

  • Nom de couleur valide - par exemple "red"
  • Valeur hexadécimale - par exemple "#ff0000"
  • Valeur RGB - par exemple "rgb(255,0,0)"

Veuillez consulter Valeurs de couleur CSS,obtenir une liste complète des valeurs de couleur possibles.

Autres éléments

Vous pouvez définir la couleur de fond pour n'importe quel élément HTML :

Exemple

Ici, les éléments <h1>, <p> et <div> auront des couleurs de fond différentes :

h1 {
  couleur de fond : green;
}
div {
  couleur de fond : lightblue;
}
p {
  couleur de fond : yellow;
}

Essayez-le vous-même

Transparence / Transparence

L'attribut de transparence spécifie la transparence/transparence de l'élément. La plage de valeurs est de 0,0 à 1,0. Plus la valeur est faible, plus l'élément est transparent :

transparence 1
transparence 0,6
transparence 0,3
transparence 0,1

Exemple

div {
  couleur de fond : green;
  transparence : 0,3;
}

Essayez-le vous-même

Attention :Utilisez transparence Lorsque l'attribut de transparence est appliqué au fond de l'élément, tous les éléments enfants héritent de la même transparence. Cela peut rendre difficile la lecture du texte dans un élément complètement transparent.

Transparence RGBA

Si vous ne souhaitez pas appliquer la transparence aux éléments enfants, par exemple dans l'exemple ci-dessus, utilisez RGBA Valeur de couleur. Les exemples suivants définissent la couleur de fond plutôt que la transparence du texte :

100% de transparence
60% de transparence
30% d'opacité
10% d'opacité

Vous pouvez trouver plus d'informations sur les couleurs RGB dans notre Couleurs CSS Dans ce chapitre, nous avons appris à utiliser RGB comme valeur de couleur. En plus de RGB, vous pouvez également utiliser les valeurs de couleur RGB avec alpha Les canaux sont utilisés ensemble (RGBA) - Ce canal spécifie l'opacité de la couleur.

La valeur de couleur RGBA est spécifiée comme : rgba(rouge, vert, bleu, alpha)。alpha Les paramètres sont des nombres entre 0.0 (complètement transparent) et 1.0 (complètement opaque).

Astuces :Vous pouvez trouver plus d'informations sur les couleurs RGBA dans notre Couleurs CSS Vous découvrirez plus sur les couleurs RGBA dans ce chapitre.

Exemple

div {
  background: rgba(0, 128, 0, 0.3) /* Arrière-plan vert à 30% d'opacité */
}

Essayez-le vous-même