Camadas de imagens em CSS - possível colocar 2 imagens no mesmo elemento?

Question

Supondo que eu estou definindo uma imagem de fundo para uma página web em CSS como este:

body    {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0; 
background: url(images/desk.gif) repeat bottom left;
}

Existe alguma maneira à camada uma segunda imagem na parte superior do desk.gif dentro do próprio elemento de corpo, ou é a única maneira de criar uma classe separada e utilizar o eixo z?

Desculpe, é uma questão simplista, mas eu venho tentando descobrir isso e embora eu não tenha sido capaz de fazê-lo funcionar, eu também não encontrei uma Slapdown clara da idéia em qualquer lugar on-line ... por isso, há uma maneira, ou é apenas um não pode fazer?

Obrigado!

Answer 1

Em suma, não é possível. Você pode fazer isso, mas você precisa adicionar um segundo objeto HTML para a página para fazê-lo funcionar. Assim, por exemplo, colocar um certo bloco div abaixo de seu corpo, e atribuir o segundo plano de fundo para esse objeto.

Espero que isso ajude!

Answer 2

fundos em camadas são parte do CSS3 Working Draft mas, como tanto quanto eu sei, suporte para eles é limitado a navegadores baseados no WebKit KHTML / como o Safari, Chrome, Konqueror e OmniWeb.

Usando o código de exemplo, isso seria algo como:

body    {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: Verdana, Arial, Sans-Serif;
    background-color: #9D5922;
    color: #000;
    margin-left: auto;
    margin-right: auto;
    margin: 0;
    padding: 0; 
    background: url("images/top.gif") left bottom repeat,
                url("images/desk.gif") left bottom repeat;
}

Answer 3

Eu já postou a solução em uma pergunta duplicado, mas para qualquer um que pode requerer essas informações eu vou postá-lo aqui também.

Tanto quanto eu estou ciente que não é possível para colocá-lo na mesma camada, mas é possível colocar várias imagens em div de separado em cima uns dos outros, e tem sido implementadas pelo popular site de testes de usabilidade Silverback (verificar os antecedentes para ver como ele foi em camadas). Se você olhar através do código-fonte você pode ver que o fundo é composta de várias imagens, colocado em cima uns dos outros.

Aqui está o artigo que demonstra como fazer o efeito pode ser encontrado em A vitamina . Um conceito similar para envolver estes 'cebola pele' camadas podem ser encontradas no A List Apart .

Answer 4

Hoje em dia isso pode ser feito em todos os navegadores "modernos" (não

Para obter a sintaxe você pode escolher entre

  background:url(..) repeat-x left top,
             url(..) repeat-x left bottom;

e

  background-image:url(..), url(..);
  background-position:left top, left bottom;
  background-repeat:repeat-x;

Você não precisa as quebras de linha, mas a vírgula é importante.

---

Atenção! A seguir irá criar dois fundos, mesmo que você especificou apenas uma imagem url:

  background-image:url(..);
  background-position:top, bottom;

---

E, claro, há a alternativa de usar recipientes aninhados, mas isso vai inchar o seu html.

Answer 5

A única maneira é usar um outro recipiente. Cada elemento pode conter apenas uma imagem de fundo.

Answer 6

Uso de posicionamento absoluto e um índice z para obter o segundo elemento no topo.

Answer 7

texto do link

Acima mencionados ligação melhor descreve o que você r até ...

Answer 8

Não esqueça que você pode aplicar estilos ao elemento HTML:

html {
background: url(images/whatever.gif);
}