background-color
A propriedade CSS background-color
define a cor de fundo de um elemento.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
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 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
<color>where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
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 de navegadores
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
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