Propriété CSS background-color
La propriété CSS background-color définit la couleur d'arrière-plan d'un élément. Essayez les exemples interactifs.
La propriété CSS background-color définit la couleur d'arrière-plan d'un élément. La couleur remplit le contenu, le rembourrage et la bordure de l'élément, mais pas la marge — les marges sont toujours transparentes et laissent apparaître l'arrière-plan du parent.
Cette page présente la syntaxe de la propriété, les formats de couleur utilisables, les mots-clés spéciaux transparent et initial, la façon dont la couleur s'anime entre les états, ainsi que la règle d'accessibilité qui maintient le texte lisible.
Comment définir une couleur d'arrière-plan
Vous pouvez passer n'importe quelle valeur de couleur CSS valide. Les formats les plus courants sont :
- Couleurs nommées —
red,tomato,rebeccapurple. - HEX —
#ff0000(ou le raccourci à 3 chiffres#f00), avec une paire alpha optionnelle#ff000080. - rgb() / rgba() —
rgb(255, 0, 0),rgba(255, 0, 0, 0.5)pour une transparence partielle. - hsl() / hsla() —
hsl(0, 100%, 50%), souvent plus facile à ajuster à la main que le HEX.
Vous pouvez choisir des valeurs visuellement avec notre outil Color Picker, ou consulter la référence complète des couleurs HTML.
background-color est la partie la plus simple du raccourci background ; si vous n'avez besoin que d'une couleur unie, définissez-la seule plutôt que d'écrire tout le raccourci.
Veillez toujours à maintenir un ratio de contraste suffisant entre la couleur d'arrière-plan et le texte placé dessus. WCAG exige au moins 4,5:1 pour le texte normal (3:1 pour le grand texte) afin que les personnes malvoyantes puissent lire la page. Utilisez un vérificateur de contraste lorsque vous choisissez des combinaisons sombre sur clair ou clair sur sombre.
| Valeur initiale | transparent |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Hérité | Non. |
| Animable | Oui. La couleur d'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>Background-color Property Example</h2>
<p>Here the background-color is specified with a hex value.</p>
</body>
</html>![Propriété CSS background-color](https://api.w3docs.com/uploads/media/default/0001/03/0e320aa63c591a91d882bbc24e53bcfcffa18142.png "CSS background-color property" =420x)
Utilisation de la transparence
Tout format de couleur avec un canal alpha permet de placer la couleur de façon semi-transparente sur ce qui se trouve derrière l'élément :
background-color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
background-color: hsla(120, 100%, 50%, 0.5); /* semi-transparent green */
background-color: #0000ff80; /* semi-transparent blue (8-digit hex) */La quatrième valeur (alpha) va de 0 (entièrement transparent) à 1 (entièrement opaque). Contrairement à la propriété opacity, une couleur d'arrière-plan avec alpha n'affecte que l'arrière-plan — le texte et les éléments enfants restent entièrement opaques.
Exemple de la propriété background-color avec la valeur « transparent » :
Exemple de la propriété CSS background-color avec la valeur transparent
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: transparent;
}
</style>
</head>
<body>
<h2>Background-color Property Example</h2>
<p>In this example the background-color is set to transparent. This is the default value.</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 of background-color property</h2>
<p>
In this example it gradually changes the background color from grey to blue, and back to grey.
</p>
</body>
</html>Parce que background-color est animable, le navigateur interpole en douceur entre les deux couleurs. Cela fonctionne de la même manière avec les transitions CSS — par exemple, pour faire fondre l'arrière-plan d'un bouton au survol (:hover).
Héritage
background-color n'est pas hérité. Chaque élément commence à transparent, de sorte qu'un enfant ne copie pas l'arrière-plan de son parent — il laisse simplement l'arrière-plan du parent transparaître, sauf si vous lui attribuez le sien. C'est pourquoi définir une couleur sur <body> semble « remplir la page » : les éléments enfants sont transparents et la couleur du body apparaît derrière eux.
Support des navigateurs
background-color fait partie de la spécification depuis CSS1 et est pris en charge par tous les navigateurs, y compris toutes les versions d'Internet Explorer. La notation HEX-avec-alpha à 4 et 8 chiffres (#rrggbbaa) est le seul ajout plus récent et nécessite un navigateur raisonnablement moderne ; rgba() et hsla() sont sûrs partout.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| transparent | Il s'agit de la valeur par défaut qui définit la couleur d'arrière-plan comme transparente. Cela signifie qu'il n'y a pas de couleur d'arrière-plan. | Essayer » |
| color | Définit la couleur d'arrière-plan. On peut utiliser des noms de couleurs, des codes hexadécimaux, rgb(), rgba(), hsl(), hsla(). | Essayer » |
| initial | Définit la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite de la propriété depuis son élément parent. |