background-color - Propriété CSS
Résumé des caractéristiques de la propriété background-color
transparent
| currentcolor
transparent
background-color
passe progressivement d'une valeur à une autre.Description de la propriété background-color
.
background-color
définit la couleur de l'arrière-plan. Si une ou plusieurs images d'arrière-plan
sont également définies (avec la propriété background-image
, elle sont prioritaires sur la couleur,
mais cette dernière peut cependant être visible à travers les parties transparentes des images d'arrière-plan.
La couleur peut également être mélangée avec les images d'arrière-plan avec la propriété
background-blend-mode
.
Dans le cas d'arrière-plan multiples (voir la page background
), la couleur reste cependant unique, et ne peut pas
être définie pour chacune des images d'arrière-plan : la couleur est positionnée en dessous de toutes les images
d'arrière-plan.
Reportez-vous à la page background
pour une explication sur le fonctionnement général des arrière-plans.
Syntaxes pour background-color
.
- background-color: transparent;
Valeur par défaut.
- background-color: #421824;
La couleur peut être écrite sous toutes les formes reconnues par CSS (voir les couleurs CSS).
- background-color:
initial
; background-color:inherit
; background-color:revert
; background-color:revert-layer
; background-color:unset
;La valeur initiale est :
.transparent
Exemples.
Animation de la propriété background-color
.
Les codes de couleur étant des valeurs numériques, background-color
se prête très bien aux animations.
Même lorsque la couleur est spécifiée par son nom (red
, cyan
, etc.) le navigateur effectue la
conversion dans le code numérique correspondant.
La spécification des couleurs avec la fonction hsl()
est parfois plus pratique car elle permet par exemple de
garder une teinte fixe tout en ne faisant varier que la luminosité.
Manipulation de la propriété background-color
par programme.
Modifier la valeur de background-color
en Javascript.
Voici deux exemples de codes Javascript pour modifier la valeur de background-color
pour un élément el
.
On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case
(un tiret pour séparer les mots),
et une autre syntaxe avec la notation en camel-case
, plus courante en Javascript (une majuscule pour séparer les mots).
function setBackgroundColor(el) {
el.style.backgroundColor='#f00';
}
function setBackgroundColor(el) {
el.style['background-color']='#f00';
}
Lire en Javascript la valeur de background-color
.
Voici un exemple de code pour lire, avec Javascript, la valeur de background-color
. La propriété doit être affectée directement
à l'élément lui-même via son attribut style
, et non pas en CSS via un sélecteur.
La couleur est renvoyée sous son nom s'il s'agit d'une couleur nommée, ou sous la forme rgb(r,g,b)
ou rgba(r,g,b,a)
si elle a été définie autrement que par son nom (code hexadécimal, notation HSL, etc...).
function getBackgroundColor(el) {
return el.style.backgroundColor;
}
function getBackgroundColor(el) {
return el.style['background-color'];
}
Lire la valeur calculée de background-color
en Javascript.
Voici comment lire avec Javascript la valeur calculée de background-color
. La couleur est retournée sous la forme
rgb(r,g,b)
, ou rgba(r,g,b,a)
si l'opacité n'est pas totale.
function getBackgroundColor(el) {
return window.getComputedStyle(el).getPropertyValue('background-color');
}
Modifier la valeur de la propriété background-color
avec JQuery.
Avec JQuery, voici comment modifier la valeur de la propriété background-color
pour l'élément el
:
function setBackgroundColor(el) {
$(el).css('backgroundColor','#f00');
}
function getBackgroundColor(el) {
$(el).css('background-color','#f00');
}
Lire la valeur calculée de la propriété background-color
avec JQuery.
Lire avec JQuery la valeur calculée de la propriété background-color
peut se faire avec les codes suivants.
Comme en Javascript, la couleur est retournée sous la forme rgb(r,g,b)
ou rgba(r,g,b,a)
si la couleur n'est
pas totalement opaque.
function setBackgroundColor(el) {
return $(el).css('backgroundColor');
}
function getBackgroundColor(el) {
return $(el).css('background-color');
}
Simulateur.
Compatibilité entre navigateurs.
Aucun problème de compatibilité n'est à signaler : tous les navigateurs prennent depuis longtemps en charge la propriété background-color
.
background-color
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que background-color
.
Les spécifications CSS éditées par le W3C sont organisées en modules. background-color
fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.