background-color
================

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

Experimente
-----------

Sintaxe
-------


```css
/\* 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.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Definição formal
----------------

|  |  |
| --- | --- |
| Initial value | `transparent` |
| Aplica-se a | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | não |
| Computed value | computed color |
| Animation type | a color |

Sintaxe formal
--------------
```

background-color =   
  <color>    
  
```

Exemplos
--------

### HTML


```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


```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 |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-color |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Multiple backgrounds
* The `<color>` data type
* Other color-related properties: `color`, `border-color` (en-US), `outline-color` (en-US), `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, `caret-color` (en-US), and `column-rule-color` (en-US)
* Applying color to HTML elements using CSS