Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
background-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
A propriedadeCSSbackground-color define a cor de fundo de um elemento.
Experimente
background-color: brown;background-color: #74992e;background-color: rgb(255, 255, 128);background-color: rgba(255, 255, 128, 0.5);background-color: hsl(50, 33%, 25%);background-color: hsla(50, 33%, 25%, 0.75);<section> <div></div></section>#example-element { min-width: 100%; min-height: 100%; padding: 10%;}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 propriedadebackground-color recebe um único valor<color>.
Valores
<color>A cor uniforme de fundo. É renderizado atrás de qualquer
background-imageespecificado, 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 atuaisDiretrizes 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 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 | acolor |
Sintaxe formal
background-color =
<color>
Exemplos
HTML
<div>Lorem ipsum dolor sit amet, consectetuer</div><div>Lorem ipsum dolor sit amet, consectetuer</div><div>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 |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-color |
Compatibilidade com navegadores
Veja também
- Multiple backgrounds
- The
<color>data type - Other color-related properties:
color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color, andcolumn-rule-color - Applying color to HTML elements using CSS