Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Multiple backgrounds

Com CSS3, você pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da outra onde o o primeiro fundo dado será desenhado no topo e apenas o último fundo da lista poderá definir uma cor sólida de fundo.

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

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

Você pode fazer isso com a propriedade reduzida 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, (background-repeat e background-position) se aplicam aos fundos correspondentes. Então o primeiro valor para background-repeat se aplica ao primeiro plano de fundo (o mais da frente), e assim por adiante.

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: teoli, Lehrerschuler
 Última atualização por: teoli,