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é CSS background-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 id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#example-element {
min-width: 100%;
min-height: 100%;
padding: 10%;
}
Syntaxe
/* 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 toute
background-imagedéfinie, bien que la couleur reste visible à travers toute transparence présente dans l'image.
Accessibilité
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 | une couleur |
Syntaxe formelle
background-color =
<color>
Exemples
Colorer des boîtes
Cet exemple montre l'application de background-color à des éléments HTML <div> en utilisant différentes valeurs CSS <color>.
HTML
<div class="exemple-un">Lorem ipsum dolor sit amet, consectetuer</div>
<div class="exemple-deux">Lorem ipsum dolor sit amet, consectetuer</div>
<div class="exemple-trois">Lorem ipsum dolor sit amet, consectetuer</div>
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 de background-color sur des éléments HTML <table>, y compris les lignes <tr> et les cellules <td>.
HTML
<table>
<tbody>
<tr id="r1">
<td id="c11">11</td>
<td id="c12">12</td>
<td id="c13">13</td>
</tr>
<tr id="r2">
<td id="c21">21</td>
<td id="c22">22</td>
<td id="c23">23</td>
</tr>
<tr id="r3">
<td id="c31">31</td>
<td id="c32">32</td>
<td id="c33">33</td>
</tr>
</tbody>
</table>
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;
}
Result
Spécifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-color |
Compatibilité des navigateurs
Voir aussi
- Utiliser plusieurs arrières-plans
- Le type de donnée
<color> - Les autres propriétés relatives aux couleurs :
color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-coloretcolumn-rule-color