diff options
Diffstat (limited to 'files/pt-br/web/css/background/index.html')
| -rw-r--r-- | files/pt-br/web/css/background/index.html | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/files/pt-br/web/css/background/index.html b/files/pt-br/web/css/background/index.html new file mode 100644 index 0000000000..81390eb8e3 --- /dev/null +++ b/files/pt-br/web/css/background/index.html @@ -0,0 +1,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> |