Propriedade de Cor de Fundo
Última atualização: 2026-09-13
background-color Propriedade de Cor de Fundo
A propriedade background-color define a cor de fundo de um elemento e é uma das propriedades mais fundamentais no design de páginas. Aceita todo valor de cor do CSS, e a palavra-chave transparent dá um fundo transparente. A propriedade não é herdada, e o fundo de cada elemento é transparente por padrão.
| Categoria | |
|---|---|
| Valor Inicial | transparent |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | color |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
background-color: <color> | transparent;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<color> | Tipo | Valor de cor de fundo |
transparent | Palavra-chave | Fundo transparente |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-color | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： A cor de fundo não se estende até a área de margem; apenas as áreas de conteúdo e preenchimento são pintadas.
Importante： Sempre garanta que o contraste entre a cor de fundo e a cor do texto atenda aos padrões de legibilidade do WCAG.
❓ Perguntas Frequentes
QComo torno um fundo totalmente transparente?
ADefina background-color: transparent; para revelar os elementos abaixo ou a cor base da página. A transparência afeta apenas o fundo — o próprio conteúdo do elemento (texto, filhos) não é afetado. Para fazer todo o elemento, incluindo seu conteúdo, desaparecer, use opacity: 0 ou visibility: hidden.
Qbackground-color é herdada?
ANão. Seu valor padrão é transparent, e cada elemento o calcula independentemente sem herdar do pai. Mas quando o fundo de um filho é transparente, o fundo do pai ou do body aparece visualmente por trás — o que também explica por que definir um fundo no body parece cobrir a página inteira.
QComo deixo o fundo semitransparente sem afetar o texto?
AUse uma cor com canal alfa, como background-color: rgba(0, 0, 0, 0.5); ou hsla(210, 50%, 50%, 0.5), ou um hex de 8 dígitos como #00000080. Apenas o fundo fica translúcido enquanto o texto permanece nítido. Evite opacity, porque ele torna o texto e os filhos transparentes também.
QPosso fazer um gradiente com background-color?
ANão. background-color só suporta cores sólidas; gradientes pertencem à família background-image e precisam de funções como background-image: linear-gradient(to right, #ff7e5f, #feb47b);. Ainda assim, background-color é frequentemente usada como a camada base sob um gradiente, fornecendo uma cor de fallback enquanto a imagem do gradiente carrega.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
