background-color
La propriété background-color définit la couleur d'arrière-plan d'un élément. Il peut s'agir d'une couleur transparente ou translucide. Il est conseillé d'utiliser cette propriété même lorsque l'on utilise une image de fond pour le cas où il y aurait un problème de chargement de l'image.Il y a plusieurs possibilités pour indiquer la valeur appliquée à la propriété.
background-color: currentcolor; est sans doute la façon la moins répandue pour définir une couleur mais qui mérite être connue.
<style>
.carre {
width: 200px;
height: 200px;
border: 1px solid black;
color: red;
background-color: yellow;
}
#ex01 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: currentColor;
}
</style>
<div class="carre">
<div id="ex01"></div>
Le texte est rouge
</div>
Le texte est rouge
La valeur currentcolor prend la valeur de la dernière couleur d'encre déclarée. L'encre du carré jaune est rouge donc le fond du deuxième carré est rouge. Dans une telle configuration, on ne peut pas mettre de couleur d'encre au deuxième carré car sa valeur serait déclarée après celle du carré jaune ce qui fait que le deuxième carré serait de la même couleur que son encre.
Dans l'exemple, nous avons utilisé des couleurs désignées par un mot clé (yellow, red). Vous trouverez la liste de ces mots sur la page <color>.
Le nombre de ces couleurs étant limitées, on utilise très souvent la notation hexadécimale sur 6 caractères précédés du signe #. On utilise 3 couples de caractères qui vont de "00" à "FF" (0 à 255) pour respectivement le rouge, le vert et le bleu.
background-color: #bc62ad;
Pour certaines valeurs il est possible de limiter le nombre de caractères à 3 lorsque chaque couple de caractères est composé de deux fois le même caractère.
background-color: #abc; est égal à background-color: #aabbcc;