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
|
---
title: background
slug: Web/CSS/background
tags:
- Fundo CSS
- Propriedades CSS
- Referencia
translation_of: Web/CSS/background
---
<div><font><font>{{CSSRef ( "CSS Background")}}</font></font></div>
<h2 id="Resumo"><font><font>Resumo</font></font></h2>
<p><font><font>A propriedade CSS </font></font><strong><code><font><font>background</font></font></code></strong><font><font> é um atalho para definir os valores de fundo individuais em um único lugar na folha de estilo. <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Background</span></font></font></font><font><font> pode ser usado para definir os valores para um ou mais dos seguintes: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}} , {{cssxref("background-repeat")}}, {{cssxref("background-size")}} e {{cssxref("background-attachment")}}.</font></font></p>
<p><font><font>O </font></font><code><font><font>fundo</font></font></code><font><font> CSS propriedade estenográfica atribui valores dados explícitos e conjuntos de propriedades para seus valores iniciais em falta.</font></font></p>
<p><font><font>{{cssinfo}}</font></font></p>
<h2 id="Sintaxe"><font><font>Sintaxe</font></font></h2>
<pre class="brush: css"><font><font>/ * Usando uma <</font></font><code><font><font>cor-de-fundo</font></font></code><font><font>> * /
background: green;</font></font>
<font><font>
/ * Usando uma <</font></font><code><font><font>imagem-de-fundo</font></font></code><font><font>> e <</font></font><code><font><font>estilo-de-repetição</font></font></code><font><font>> * /
background: url("test.jpg") repeat-y;</font></font>
<font><font>
/ * Usando uma <box> e <</font></font><code><font><font>cor-de-fundo</font></font></code><font><font>> * /
background: border-box red;</font></font>
<font><font>
/ * Uma única imagem, centrado e escalado * /
background: no-repeat center/80% url( "../img/image.png");</font></font>
</pre>
<div class="note"><strong><font><font>Nota:</font></font></strong><font><font> O {{cssxref ( "background-color")}} só pode ser definido no último fundo, como há apenas uma cor de fundo para todo o elemento.</font></font></div>
<h3 id="Valores"><font><font>Valores</font></font></h3>
<p><font><font>Um ou mais dos seguintes, por qualquer ordem:</font></font></p>
<dl>
<dt><code><font><font><anexo></font></font></code></dt>
<dd><font><font>Veja {{cssxref ( "background-attachment")}}</font></font></dd>
<dt><code><font><font><box></font></font></code></dt>
<dd><font><font>Veja {{cssxref ( "background-clip")}}</font></font></dd>
<dt><code><font><font><cor-de-fundo></font></font></code></dt>
<dd><font><font>Veja {{cssxref ( "background-color")}}</font></font></dd>
<dt><code><font><font><imagem-de-fundo></font></font></code></dt>
<dd><font><font>Veja {{Cssxref ( "background-image")}}</font></font></dd>
<dt><code><font><font><posição></font></font></code></dt>
<dd><font><font>Veja {{cssxref ( "background-position")}}</font></font></dd>
<dt><code><font><font><estilo-de-repetição></font></font></code></dt>
<dd><font><font>Veja {{cssxref ( "background-repeat")}}</font></font></dd>
<dt><code><font><font><tamanho-do-fundo></font></font></code></dt>
<dd><font><font>Veja {{cssxref ( "background-size")}}. </font><font>Esta propriedade deve ser especificado após </font></font><strong><font><font><posição></font></font></strong><font><font> , separados com o caractere '/'.</font></font></dd>
</dl>
<h3 id="Sintaxe_formal"><font><font>Sintaxe formal</font></font></h3>
<pre class="syntaxbox"><font><font>{{csssyntax}}</font></font></pre>
<h2 id="Exemplos"><font><font>Exemplos</font></font></h2>
<h3 id="HTML"><font><font>HTML</font></font></h3>
<pre class="brush: html"><font><font><p class="Topbanner">
céu estrelado<br/>
Cintilando Cintilando<br/>
Céu estrelado
</p></font></font><font><font>
<p class="atencao">Este é um parágrafo<p></font></font></pre>
<h3 id="CSS"><font><font>CSS</font></font></h3>
<pre class="brush:css' highlight:[2,6];"><font><font>.atencao { </font></font><font><font>
background: red; </font></font><font><font>
}</font></font>
<font><font>
.Topbanner { </font></font><font><font>
background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed; </font></font><font><font>
}</font></font>
</pre>
<h3 id="Resultado"><font><font>Resultado</font></font></h3>
<p><font><font>{{EmbedLiveSample ( "Exemplos")}}</font></font></p>
<h2 id="Especificações"><font><font>Especificações</font></font></h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col"><font><font>Especificação</font></font></th>
<th scope="col"><font><font>estado</font></font></th>
<th scope="col"><font><font>Comente</font></font></th>
</tr>
</thead>
<tbody>
<tr>
<td><font><font>{{SpecName ( 'Fundos CSS3', '# a-fundo', 'fundo')}}</font></font></td>
<td><font><font>{{Spec2 ( 'Fundos CSS3')}}</font></font></td>
<td><font><font>A propriedade taquigráfica foi estendido para suportar múltiplas origens e a nova {{cssxref("background-size")}}, {{cssxref("background-origem")}} e {{cssxref("background-clip")}} propriedades.</font></font></td>
</tr>
<tr>
<td><font><font>{{SpecName ( 'CSS2.1', '# propdef-fundo colors.html', 'background')}}</font></font></td>
<td><font><font>{{Spec2 ( 'CSS2.1')}}</font></font></td>
<td><font><font>Não ocorreram alterações significativas</font></font></td>
</tr>
<tr>
<td><font><font>{{SpecName ( 'CSS1', '#background', 'background')}}</font></font></td>
<td><font><font>{{Spec2 ( 'CSS1')}}</font></font></td>
<td><font><font>definição inicial</font></font></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_do_navegador"><font><font>Compatibilidade do navegador</font></font></h2>
<p class="hidden">A tabela de compatibilidade desta página é gerada por meio de dados estruturados. Se você pudesse contribuir com a criação de dados, por favor verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</p>
<p>{{Compat("css.properties.background")}}</p>
<h2 id="Veja_também"><font><font>Veja também</font></font></h2>
<ul>
<li><font><font>{{Cssxref ( "- moz-fundo-inline-política")}}</font></font></li>
<li><a href="/en-US/docs/CSS/Using_CSS_gradients"><font><font>Usando gradientes</font></font></a></li>
<li><a href="/en-US/docs/CSS/Multiple_backgrounds"><font><font>Vários fundos</font></font></a></li>
</ul>
|
