background-color CSS propriété

Définition de la CSS background-color.

La propriété d'Arrière-plan CSS background-color permet de spécifier la couleur de l'arrière plan ou couleur de fond d'un élément HTML ou XTHML. Cette couleur d'arrière-plan peut être totalement transparente, totalement opaque ou semi-transparente selon le format de couleur utilisé. Par défaut, la couleur d'arrière-plan va s'étendre sous les bordures.

background-color : yellowgreen; 
background-color : #9ACD32;
background-color : rgb(154, 205, 50);
background-color : hsl(80, 61%, 50%);
/* Couleurs avec transparence */
background-color : transparent;
background-color : rgba(154, 205, 50, 0.5);
background-color : hsla(80, 61%, 50%, 0.5)

La propriété de feuille de style background-color CSS peut prendre comme valeur de couleur :

• transparent : l'arrière plan est transparent, il n'y a pas de couleur d'arrière-plan. Valeur par défaut. Peut être utilisée pour rendre transparentes les iframe.
• #rgb : couleur d'arrière-plan au format hexadécimal, ex:#9ACD32.
• nommée : couleur d'arrière-plan au format nommé, ex:yellowgreen.
• rgb(r,g,b) : couleur d'arrière-plan au format RGB. r, g et b sont compris entre 0 et 255, s'ils sont en pourcentage alors spécifier l'unité "%". Ex:rgb(154,205,50).
• rgba(r,g,b,alpha) : couleur d'arrière-plan au format en RGB avec transparence (CSS3). "alpha" est compris entre 0 et 1. Ex:rgba(154,205,50,0.6).
• hsl(h,s%,l%) : couleur d'arrière-plan au format HSL (CSS3), ex:hsl(80,61%,50%).
• hsla(h,s%,l%,alpha) : couleur d'arrière-plan au format HSL avec transparence (CSS3). "alpha" est compris entre 0 et 1. Ex:hsla(80,61%,50%,0.2).
• currentColor : couleur d'arrière-plan héritée de la couleur calculée de color.
• inherit : couleur d'arrière-plan héritée de la couleur de fond de son parent (Css2).

Exemple de code background-color CSS

Conditions d'application de la CSS background-color.

La CSS background-color est applicable sur toutes les balises HTML ou XHTML.

La valeur de la CSS background-color peut être mise directement dans la propriété de raccourci CSS background.

Héritage des valeurs Css de background-color.

La couleur d'arrière-plan n'est pas héritée de la propriété background-color CSS de l'élément parent.

Problème d'interprétation de background-color en Css.

La propriété de feuille de style background-color css est reconnue par tous les navigateurs, sauf pour les nouvelles unités de couleurs CSS3 (Compatibilité des formats de couleur web) et pour currentColor. (2015).

Conditions d'animation de background-color en CSS3.

La CSS background-color est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.