Multiple backgrounds

  • Revision slug: CSS/Multiple_backgrounds
  • Revision title: Multiple backgrounds
  • Revision id: 292976
  • Criado:
  • Criador: Lehrerschuler
  • É a revisão atual? Não
  • Comentar

Conteúdo da revisão

Com CSS3, você pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da outra onde o primeira fundo que você prover ficará no topo e apenas o último fundo poderá definir uma cor de fundo.

Especificar planos de fundo múltplos é fácil:

.minhaClasse {
  background: fundo1, fundo2, ..., fundoN;
}

Você pode fazer isso com a propriedade reduzida {{ cssxref("background") }} e também com as propriedade individuais, com a excessão de background-color. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: background , background-attachment , background-clip , background-image , background-origin , background-position , background-repeat , background-size .

Exemplo

Neste exemplo, três planos de fundos estão empilhados: o logo do Firefox, um degradê linear, e uma imagem com flores:

.multi_bg_example {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
        -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, right;
}
Captura de Tela Demonstração
css_multibg.png  

Como pode ver, o logo do firefox (listado primeiro) está no topo, seguido do gradiente que está uma camada acima do fundo florido. Cada uma das sub-propriedade subsequente, ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) se aplicam aos fundos correspondentes. Então o primeiro valor para {{ cssxref("background-repeat") }} se aplica ao primeiro plano de fundo (o mais da frente), e assim por adiante.

Veja também

{{ languages( { "ja": "ja/CSS/Multiple_backgrounds" } ) }}

Fonte da revisão

<p>Com <a href="/en/CSS/CSS3" title="CSS3">CSS3</a>, você pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da outra onde o primeira fundo que você prover ficará no topo e apenas o último fundo poderá definir uma cor de fundo.</p>
<p>Especificar planos de fundo múltplos é fácil:</p>
<pre class="brush: css">
.minhaClasse {
&nbsp; background: fundo1, fundo2, ..., fundoN;
}
</pre>
<p>Você pode fazer isso com a propriedade reduzida {{ cssxref("background") }} e também com as propriedade individuais, com a excessão de <code><a href="/en/CSS/background-color" rel="custom nofollow">background-color</a></code>. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: <span class="lang lang-*"> <code><a href="/en/CSS/background" rel="custom nofollow">background</a></code> , <code><a href="/en/CSS/background-attachment" rel="custom nofollow">background-attachment</a></code> , <code><a href="/en/CSS/background-clip" rel="custom nofollow">background-clip</a></code> , <code><a href="/en/CSS/background-image" rel="custom nofollow">background-image</a></code> , <code><a href="/en/CSS/background-origin" rel="custom nofollow">background-origin</a></code> , <code><a href="/en/CSS/background-position" rel="custom nofollow">background-position</a></code> , <code><a href="/en/CSS/background-repeat" rel="custom nofollow">background-repeat</a></code> , <code><a href="/en/CSS/background-size" rel="custom nofollow">background-size</a></code> </span>.</p>
<h2 id="Exemplo">Exemplo</h2>
<p>Neste exemplo, três planos de fundos estão empilhados: o logo do Firefox, um degradê linear, e uma imagem com flores:</p>
<pre class="brush: css">
.multi_bg_example {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, right;
}
</pre>
<table class="standard-table">
  <tbody>
    <tr>
      <td class="header">Captura de Tela</td>
      <td class="header" style="width:202px">Demonstração</td>
    </tr>
    <tr>
      <td style="padding:0;"><img alt="css_multibg.png" class="internal default" src="/@api/deki/files/4028/=css_multibg.png" style="display:block;" /></td>
      <td style="background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png), -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)), url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); background-repeat: no-repeat, no-repeat, repeat; background-position: bottom right, left, right;">&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>Como pode ver, o logo do firefox (listado primeiro) está no topo, seguido do gradiente que está uma camada acima do fundo florido. Cada uma das sub-propriedade subsequente, ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) se aplicam aos fundos correspondentes. Então o primeiro valor para {{ cssxref("background-repeat") }} se aplica ao primeiro plano de fundo (o mais da frente), e assim por adiante.</p>
<h2 id="Veja_tamb.C3.A9m">Veja também</h2>
<ul>
  <li>{{ CSS_Reference:Background() }}</li>
  <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Usando degradês</a></li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/Multiple_backgrounds" } ) }}</p>
Reverter para esta revisão