background-color

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriétéCSSbackground-color définit la couleur d'arrière-plan d'un élément.

Exemple interactif

background-color: brown;

background-color: #74992e;

background-color: rgb(255 255 128);

background-color: rgb(255 255 128 / 0.5);

background-color: hsl(50 33% 25%);

background-color: hsl(50 33% 25% / 0.75);

<section>  <div></div></section>

#example-element {  min-width: 100%;  min-height: 100%;  padding: 10%;}

Syntaxe

css

/* Valeurs avec un mot-clé */background-color: red;background-color: indigo;/* Valeur hexadécimale */background-color: #bbff00; /* Complètement opaque */background-color: #bf0; /* Complètement opaque - notation raccourcie */background-color: #11ffee00; /* Complètement transparent */background-color: #1fe0; /* Complètement transparent - notation raccourcie */background-color: #11ffeeff; /* Complètement opaque */background-color: #1fef; /* Complètement opaque - notation raccourcie *//* Valeur RGB */background-color: rgb(255 255 128); /* Complètement opaque */background-color: rgb(117 190 218 / 50%); /* 50% transparent *//* Valeur HSLA */background-color: hsl(50 33% 25%); /* Complètement opaque */background-color: hsl(50 33% 25% / 75%); /* 75% opaque, donc 25% transparent *//* Valeurs avec un mot-clé spécial */background-color: currentcolor;background-color: transparent;/* Valeurs globales */background-color: inherit;background-color: initial;background-color: revert;background-color: revert-layer;background-color: unset;

La propriétébackground-color se définit grâce à une valeur de type<color>.

Valeurs

<color>: La couleur uniforme de l'arrière-plan. Elle est affichée derrière toutebackground-image définie, bien que la couleur reste visible à travers toute transparence présente dans l'image.

Il est important de vérifier que le contraste entre la couleur d'arrière-plan et la couleur du texte est suffisamment élevé afin que le contenu de la page puisse être lu, quelles que soient les conditions de vision.

Le ratio de contraste entre les couleurs est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Pour respecter les règles d'accessibilitéWeb Content Accessibility Guidelines (WCAG), il faut avoir un ratio de 4.5:1 pour le contenu textuel normal et un ratio de 3:1 pour les textes plus grands comme les titres (un texte sera considéré comme grand s'il est en gras et mesure au moins 18.66px ou s'il mesure au moins 24 pixels).

Définition formelle

Valeur initiale	`transparent`
Applicabilité	tous les éléments. S'applique aussi à`::first-letter` et`::first-line`.
Héritée	non
Valeur calculée	couleur calculée
Type d'animation	unecouleur

Syntaxe formelle

background-color =
<color>

Exemples

Colorer des boîtes

Cet exemple montre l'application debackground-color à des éléments HTML<div> en utilisant différentes valeurs CSS<color>.

HTML

html

<div>Lorem ipsum dolor sit amet, consectetuer</div><div>Lorem ipsum dolor sit amet, consectetuer</div><div>Lorem ipsum dolor sit amet, consectetuer</div>

CSS

css

.exemple-un {  background-color: transparent;}.exemple-deux {  background-color: rgb(153 102 153);  color: rgb(255 255 204);}.exemple-trois {  background-color: #777799;  color: white;}

Résultat

Colorer des tableaux

Cet exemple montre l'utilisation debackground-color sur des éléments HTML<table>, y compris les lignes<tr> et les cellules<td>.

HTML

html

<table>  <tbody>    <tr>      <td>11</td>      <td>12</td>      <td>13</td>    </tr>    <tr>      <td>21</td>      <td>22</td>      <td>23</td>    </tr>    <tr>      <td>31</td>      <td>32</td>      <td>33</td>    </tr>  </tbody></table>

CSS

css

table {  border-collapse: collapse;  border: solid black 1px;  width: 250px;  height: 150px;}td {  border: solid 1px black;}#r1 {  background-color: lightblue;}#c12 {  background-color: cyan;}#r2 {  background-color: grey;}#r3 {  background-color: olive;}