background-color

A propriedade CSS background-color define a cor de fundo de um elemento.

Sintaxe

/* Valores em chaves */
background-color: red;
background-color: indigo;

/* Valores em Hexadecimais */
background-color: #bbff00;    /* Totalmente opaco */
background-color: #bf0;       /* Forma abreviada totalmente opaco */
background-color: #11ffee00;  /* Totalmente transparente */
background-color: #1fe0;      /* Forma abreviada totalmente transparente */
background-color: #11ffeeff;  /* Totalmente opaco */
background-color: #1fef;      /* Forma abreviada totalmente opaco */

/* Valores em RGB */
background-color: rgb(255, 255, 128);        /* Totalmente opaco */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparente */

/* Valores em HSL */
background-color: hsl(50, 33%, 25%);         /* Totalmente opaco */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparente */

/* Valores em chaves especiais */
background-color: currentcolor;
background-color: transparent;

/* Valores globais */
background-color: inherit;
background-color: initial;
background-color: unset;

A propriedade background-color recebe um Ćŗnico valor <color>.

Valores

<color>
A cor uniforme de fundo. Ɖ renderizado atrĆ”s de qualquer background-image (en-US) especificado, embora a cora ainda continue visible atravĆ©s de qualquer transparĆŖncia da imagem.

Acessibilidade

Ɖ importante assegurar que o contraste entre a cor de fundo e a cor do texto colocado sobre ele Ć© alta o suficiente para pessoas com condiƧƵes de baixa visĆ£o possam ler o conteĆŗdo da pĆ”gina.

A cor do contrast Ć© determinada comparando a luminĆ¢ncia da cor do texto e da cor de fundo.  Para atender Ć s atuais Diretrizes de Acessibilidade de ConteĆŗdo da Web (WCAG), uma proporĆ§Ć£o de 4.5:1 Ć© necessĆ”ria para conteĆŗdo de texto e 3:1 para textos maiores como tĆ­tulos. Texto grande Ć© definido como 18.66px e negrito ou maior, ou 24px ou maior.

DefiniĆ§Ć£o formal

Initial valuetransparent
Aplica-se aall elements. It also applies to ::first-letter and ::first-line.
InheritednĆ£o
Computed valuecomputed color
Animation typea color

Sintaxe formal

<color>

where
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>

where
<rgb()> = rgb( <percentage> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> (en-US) <percentage> (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage> (en-US), <percentage> (en-US), <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> (en-US) <percentage> (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage> (en-US), <percentage> (en-US), <alpha-value>? (en-US) )

where
<alpha-value> = <number> | (en-US) <percentage> (en-US)
<hue> = <number> | (en-US) <angle> (en-US)

Exemplos

HTML

<div class="exampleone">
  Lorem ipsum dolor sit amet, consectetuer
</div>

<div class="exampletwo">
  Lorem ipsum dolor sit amet, consectetuer
</div>

<div class="exemplothree">
  Lorem ipsum dolor sit amet, consectetuer
</div>

CSS

.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153,102,153);
  color: rgb(255,255,204);
}

.examplethree {
  background-color: #777799;
  color: #FFFFFF;
}

Result

EspecificaƧƵes

Specification Comment Feedback
CSS Backgrounds and Borders Module Level 3
The definition of 'background-color' in that specification.
Though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true <color> Backgrounds Level 3 GitHub issues
CSS Level 2 (Revision 1)
The definition of 'background-color' in that specification.
CSS Level 1
The definition of 'background-color' in that specification.
Initial definition

Compatibilidade com navegadores

BCD tables only load in the browser

Veja tambƩm