Propriedade CSS background-color

A propriedade CSS background-color define a cor de fundo de um elemento. A cor preenche as caixas de conteúdo, padding e borda do elemento, mas não a margem — as margens são sempre transparentes e mostram o fundo do elemento pai por baixo delas.

Esta página aborda a sintaxe da propriedade, os formatos de cor que podem ser usados, as palavras-chave especiais transparent e initial, como a cor é animada entre estados e a regra de acessibilidade que mantém o texto legível.

Como definir uma cor de fundo

Você pode passar qualquer valor de cor CSS válido. Os formatos mais comuns são:

Cores nomeadas — red, tomato, rebeccapurple.
HEX — #ff0000 (ou o atalho de 3 dígitos #f00), com um par alpha opcional #ff000080.
rgb() / rgba() — rgb(255, 0, 0), rgba(255, 0, 0, 0.5) para transparência parcial.
hsl() / hsla() — hsl(0, 100%, 50%), geralmente mais fácil de ajustar manualmente do que HEX.

Você pode escolher valores visualmente com nossa ferramenta Seletor de Cores, ou ler a referência completa de Cores HTML.

background-color é a parte mais simples do atalho background; se você precisar apenas de uma cor sólida, defina-a sozinha em vez de escrever o atalho completo.

Aviso

Sempre mantenha uma proporção de contraste suficientemente alta entre a cor de fundo e o texto posicionado sobre ela. O WCAG exige pelo menos 4.5:1 para texto normal (3:1 para texto grande) para que pessoas com baixa visão possam ler a página. Use um verificador de contraste ao escolher combinações escuro sobre claro ou claro sobre escuro.

Valor Inicial	transparent
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter e ::first-line.
Herdado	Não.
Animável	Sim. A cor do fundo é animável.
Versão	CSS1
Sintaxe DOM	object.style.backgroundColor = "#FFFFFF";

Sintaxe

Sintaxe da propriedade CSS background-color

background-color: color | transparent | initial | inherit;

Exemplo da propriedade background-color:

Exemplo da propriedade CSS background-color

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: #8ebc42;
      }
    </style>
  </head>
  <body>
    <h2>Background-color Property Example</h2>
    <p>Here the background-color is specified with a hex value.</p>
  </body>
</html>

Experimente Você Mesmo »

![Propriedade CSS background-color](https://api.w3docs.com/uploads/media/default/0001/03/0e320aa63c591a91d882bbc24e53bcfcffa18142.png "CSS background-color property" =420x)

Usando transparência

Qualquer formato de cor com um canal alpha permite que a cor fique semitransparente sobre o que estiver atrás do elemento:

background-color: rgba(255, 0, 0, 0.5);     /* semi-transparent red */
background-color: hsla(120, 100%, 50%, 0.5); /* semi-transparent green */
background-color: #0000ff80;                  /* semi-transparent blue (8-digit hex) */

O quarto valor (alpha) varia de 0 (totalmente transparente) a 1 (totalmente opaco). Ao contrário da propriedade opacity, uma cor de fundo com alpha afeta apenas o fundo — o texto e os elementos filhos permanecem totalmente opacos.

Exemplo da propriedade background-color com o valor "transparent":

Exemplo da propriedade CSS background-color com valor transparent

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Background-color Property Example</h2>
    <p>In this example the background-color is set to transparent. This is the default value.</p>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da versão animada da propriedade background-color:

Exemplo da propriedade CSS background-color com animação

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: #eee;
        animation: mymove 5s infinite;
      }
      @keyframes mymove {
        30% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #eee;
        }
      }
    </style>
  </head>
  <body>
    <h2> Animation of background-color property</h2>
    <p>
      In this example it gradually changes the background color from grey to blue, and back to grey.
    </p>
  </body>
</html>

Experimente Você Mesmo »

Como background-color é animável, o navegador interpola suavemente entre as duas cores. Funciona da mesma forma com transições CSS — por exemplo, esmaecendo o fundo de um botão no :hover.

Herança

background-color não é herdada. Cada elemento começa com transparent, portanto um elemento filho não copia o fundo do pai — ele simplesmente deixa o fundo do pai aparecer por baixo, a menos que você defina o seu próprio. É por isso que definir uma cor no <body> parece "preencher a página": os elementos filhos são transparentes e a cor do body aparece atrás deles.

Suporte a navegadores

background-color faz parte da especificação desde o CSS1 e é suportada em todos os navegadores, incluindo todas as versões do Internet Explorer. A notação HEX com alpha de 4 e 8 dígitos (#rrggbbaa) é a única adição mais recente e requer um navegador razoavelmente moderno; rgba() e hsla() são seguras em todos os lugares.

Valores

Valor	Descrição	Teste
transparent	Este é o valor padrão e define a cor de fundo como transparente. Significa que não há cor de fundo.	Teste »
color	Define a cor de fundo. Podem ser usados nomes de cores, códigos de cor hexadecimais, rgb(), rgba(), hsl(), hsla().	Teste »
initial	Define a propriedade para seu valor padrão.	Teste »
inherit	Herda a propriedade do elemento pai.

Prática

Qual é o objetivo de usar a propriedade 'background-color' em CSS?

Alterar a cor de fundo de um elementoAlterar a cor da fonte de um elementoAplicar uma imagem de fundo a um elementoRemover a cor de fundo de um elementoCriar uma cor de fundo translúcida