Utilização de múltiplos fundos em CSS

Com CSS3 pode aplicar múltiplos fundos aos elementos. Estes são colocados um sobre o outro, com o primeiro fundo fornecido no topo e o último fundo listado por trás. Só o último fundo pode incluir uma cor de fundo:

É fácil especificar múltiplos fundos:

.myclass {
  background: background1, background 2, ..., backgroundN;
}

Você pode fazer isto com o apanhado da propriedade background e das sub-propriedades desta: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

Exemplo

Neste exemplo, três fundos são empilhados: a logo do Firefox, um gradiente linear (en) 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;
}
Foto Demonstração ao vivo
css_multibg.png  

Como pode ver aqui, o logótipo do Firefox (listado primeiro) está no topo, seguida pelo gradiente, que está uma camada acima do fundo florido. Cada sub-propriedade (background-repeat e background-position) subsequentes aplicam-se aos fundos correspondentes. Dessa forma, o primeiro valor listado para background-repeat aplica-se ao primeiro fundo (mais a frente), e assim por diante.

Ver também

Etiquetas do documento e colaboradores

 Colaboradores para esta página: mansil, teoli, Verruckt
 Última atualização por: mansil,