1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: background-color
slug: Web/CSS/background-color
translation_of: Web/CSS/background-color
---
<div>{{CSSRef}}</div>
<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>background-color</code></strong> define a cor de fundo de um elemento.</p>
<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="brush: css no-line-numbers notranslate">/* 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;</pre>
<p>A propriedade <code>background-color</code> recebe um único valor <code><a href="#<color>"><color></a></code>.</p>
<h3 id="Valores">Valores</h3>
<dl>
<dt><a id="<color>"></a>{{cssxref("<color>")}}</dt>
<dd>A cor uniforme de fundo. É renderizado atrás de qualquer {{cssxref("background-image")}} especificado, embora a cora ainda continue visible através de qualquer transparência da imagem.</dd>
</dl>
<h2 id="Acessibilidade">Acessibilidade</h2>
<p>É 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.</p>
<p>A cor do contrast é determinada comparando a luminância da cor do texto e da cor de fundo. Para atender às atuais <a href="https://www.w3.org/WAI/intro/wcag">Diretrizes de Acessibilidade de Conteúdo da Web (WCAG)</a>, 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.</p>
<ul>
<li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="Definição_formal">Definição formal</h2>
<p>{{cssinfo}}</p>
<h2 id="Sintaxe_formal">Sintaxe formal</h2>
{{csssyntax}}
<h2 id="Exemplos">Exemplos</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><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></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight:[2,7,12]; notranslate">.exampleone {
background-color: teal;
color: white;
}
.exampletwo {
background-color: rgb(153,102,153);
color: rgb(255,255,204);
}
.examplethree {
background-color: #777799;
color: #FFFFFF;
}
</pre>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample("Examples", 200, 150)}}</p>
<ul>
</ul>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Comment</th>
<th scope="col">Feedback</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td>
<td>Though technically removing the <code>transparent</code> keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}</td>
<td><a href="https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3">Backgrounds Level 3 GitHub issues</a></td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td>
<td></td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td>
<td>Initial definition</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{Compat("css.properties.background-color")}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Multiple backgrounds</a></li>
<li>The {{cssxref("<color>")}} data type</li>
<li>Other color-related properties: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
<li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
</ul>
|
