CSS3 — Trabalhando com Múltiplas imagens background-images

Quem nunca se deparou com um layout com múltiplas imagens “sobrepostas” ou mesmo com títulos ou parágrafos que precisavam ficar suspensos sobre múltiplas imagens de fundo? Essa semana me deparei com o mesmo problema. Com CSS3, você pode aplicar aos elementos múltiplas imagens sobrepostas como plano de fundo. Sem a utilização do Z-index! É isso

Quem nunca se deparou com um layout com múltiplas imagens “sobrepostas” ou mesmo com títulos ou parágrafos que precisavam ficar suspensos sobre múltiplas imagens de fundo? Essa semana me deparei com o mesmo problema.

Com CSS3, você pode aplicar aos elementos múltiplas imagens sobrepostas como plano de fundo. Sem a utilização do Z-index! É isso mesmo, “necas de pitibiriba” de Z-index.

A primeira solução que vem à cabeça é o velho e bom “Z-index”, Veja um exemplo de implementação:

See the Pen

grvvLw

by
Moisés lopes ferreira
@selique
on
CodePen.

Funciona?!… SIM! Mas espere um momento, essa não é a única solução…

… Você já tava pensando num “workaround” safadinho, a mão da gambiarra chega a tremer nessas horas, mas nada de programação orientada a “Go-Horse”, hoje em dia temos “solucionática” pra quase tudo hehe…

Conhecendo as propriedades CSS do Background:

O nosso grande mestre Maurício Samy Silva #Maujor explica melhor as aplicações das propriedades https://maujor.com/tutorial/propriedade-css-para-estilizacao-de-background.php

Agora que conhecemos suas propriedades e características… agora vamos ver como o “background-image” funciona para entendermos nosso horizonte de possibilidades:

Background-image VS Z-index — A BATALHA:

Quando trabalhamos 2 ou 3 elementos (sejam ,

, ) temos um controle até tolerável, mas… quando utilizamos 6, 10 ou mais elementos numa mesma div ou aninhamento próximo, o z-index começa a se tornar “linguiçento” demais e somos obrigados a utilizar mais classes e ids para organizarmos nosso CSS, pensando nisso que escrevi esse post!

Às vezes não necessariamente queremos ou podemos utilizar o z-index.

Sem contar que quebramos o conceito de DRY em nosso documento CSS e não queremos isso, não é amiguinhos?

Z-index — Quando usar?

Quando temos muitos elementos e precisamos especificar propriedades e características CSS que vão além do propósito de uma “imagem de fundo” ou “sobreposição” então o Z-index é a melhor opção!

Mas se você quer simplesmente sobrepor uma imagem de um logo (ou uma composição de camadas que formam um logo) sobre um uma ou mais imagem de preenchimento de fundo o background-image é a melhor solução!

Estes elementos ficam empilhados em camadas uma acima da outra, onde o primeiro fundo dado será desenhado no topo e apenas o último elemento da lista poderá definir uma cor sólida de fundo, ou não, aí fica ao seu critério.

CSS3 permite especificar imagens de fundo para múltiplos elementos, usando nada mais do que uma única lista separada por vírgulas.

Você pode fazer isso com a propriedade reduzida background e também com as propriedade individuais, com a exceçã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. (rola até gradiente!)

Exemplos

Neste exemplo, três planos de fundos estão empilhados: um texto estilizado, o logo da Tableless.com.br, e uma imagem de fundo ilustrando uma cidade:

See the Pen

Multiple backgrounds backgroud-image

by
Moisés lopes ferreira
@selique
on
CodePen.

Suporte do navegador para múltiplas imagens com a propriedade CSS background-image é relativamente difundido na implementação do recurso citado acima:

Bibliografia (Fontes)

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *