Propriété background-color de CSS
La propriété CSS background-color définit la couleur d'arrière-plan d'un élément. L'arrière-plan couvre les boîtes de contenu, de remplissage et de bordure (mais pas la marge).
Vous pouvez choisir des couleurs à l'aide de notre outil Color Picker. Les couleurs peuvent être spécifiées par un nom de couleur (par ex. "red"), une valeur HEX (par ex. "#ff0000") ou une valeur RGB (par ex. "rgb(255,0,0)").
Il est important de s'assurer que le ratio de contraste entre la couleur d'arrière-plan et la couleur du texte qui y est superposé est suffisamment élevé, afin que les personnes malvoyantes puissent lire le contenu de la page.
| Valeur initiale | transparent |
|---|---|
| S'applique à | Tous les éléments. Il s'applique également à ::first-letter et ::first-line. |
| Hérité | Non. |
| Animable | Oui. La couleur de l'arrière-plan est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.backgroundColor = "#FFFFFF"; |
Syntaxe
Syntaxe de la propriété CSS background-color
background-color: color | transparent | initial | inherit;Exemple de la propriété background-color :
Exemple de la propriété CSS background-color
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #8ebc42;
}
</style>
</head>
<body>
<h2>Exemple de la propriété background-color</h2>
<p>Ici, la propriété background-color est spécifiée avec une valeur hexadécimale.</p>
</body>
</html>
INFO
Vous pouvez définir des valeurs hexadécimales, RGB, RGBA, HSL, HSLA ou des noms de couleurs comme valeur pour la propriété background-color. En savoir plus sur les couleurs HTML.
background-color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
background-color: hsla(120, 100%, 50%, 0.5); /* semi-transparent green */Exemple de la propriété background-color avec la valeur "transparent" :
Exemple de la propriété CSS background-color avec la valeur transparente
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: transparent;
}
</style>
</head>
<body>
<h2>Exemple de la propriété background-color</h2>
<p>Dans cet exemple, la propriété background-color est définie sur transparent. Il s'agit de la valeur par défaut.</p>
</body>
</html>Exemple de la version animée de la propriété background-color :
Exemple de la propriété CSS background-color avec animation
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #eee;
animation: mymove 5s infinite;
}
@keyframes mymove {
30% {
background-color: #1c87c9;
}
100% {
background-color: #eee;
}
}
</style>
</head>
<body>
<h2> Animation de la propriété background-color</h2>
<p>
Dans cet exemple, la couleur d'arrière-plan change progressivement du gris au bleu, puis revient au gris.
</p>
</body>
</html>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| transparent | Il s'agit de la valeur par défaut et elle définit la couleur d'arrière-plan comme transparente. Cela signifie qu'il n'y a pas de couleur d'arrière-plan. | Tester » |
| color | Définit la couleur d'arrière-plan. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. | Tester » |
| initial | Définit la propriété sur sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quel est l'objectif de l'utilisation de la propriété 'background-color' en CSS ?