Sovrapposizione di immagini nei CSS: è possibile inserire 2 immagini nello stesso elemento?

Question

Supponiamo di impostare un'immagine di sfondo per una pagina Web in CSS come questa:

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;
}

Esiste un modo per sovrapporre una seconda immagine sopra desk.gif all'interno dell'elemento body stesso o è l'unico modo per creare una classe separata e utilizzare l'asse z?

Siamo spiacenti, è una domanda semplice, ma ho cercato di capirlo e anche se non sono stato in grado di farlo funzionare, non ho anche trovato un chiaro schiaffo dell'idea ovunque online ... quindi, c'è un modo, o è solo un non posso fare?

Grazie!

Answer 1

In breve, non è possibile. Puoi farlo, ma devi aggiungere un secondo oggetto HTML alla pagina per farlo funzionare. Quindi, ad esempio, posiziona un blocco div proprio sotto il tuo corpo e assegna il secondo sfondo a quell'oggetto.

Spero che questo aiuti!

Answer 2

Gli sfondi a strati fanno parte del Bozza di lavoro CSS3 ma, come per quanto ne so, il supporto è limitato ai browser basati su WebKit / KHTML come Safari, Chrome, Konqueror e OmniWeb.

Usando il tuo codice di esempio, sembrerebbe:

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

Ho già pubblicato la soluzione in una domanda duplicata, ma per chiunque possa richiedere queste informazioni la pubblicherò anche qui.

Per quanto ne so, non è possibile inserirlo nello stesso livello, ma è possibile mettere diverse immagini in div separati l'uno sopra l'altro ed è stato implementato dal famoso sito Web di test di usabilità Silverback (controlla lo sfondo per vedere come è stato stratificato). Se guardi attraverso il codice sorgente puoi vedere che lo sfondo è composto da più immagini, posizionate una sopra l'altra.

Ecco l'articolo che dimostra come fare l'effetto può essere trovato su La vitamina . Un concetto simile per avvolgere questi strati di "pelle di cipolla" è disponibile in A List Apart .

Answer 4

Oggi questo può essere fatto in tutte le " moderne " browser (non < IE9, afaik). Posso confermare che funziona su Firefox, Opera, Chrome. Non c'è motivo di non farlo, purché si disponga di una discreta soluzione di fallback per browser / IE precedenti.

Per la sintassi puoi scegliere tra

  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;

Non sono necessarie le interruzioni di riga, ma la virgola è importante.

---

Attenzione! Di seguito verranno creati due sfondi, anche se è stato specificato solo un URL immagine:

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

---

E, naturalmente, c'è l'alternativa per usare i contenitori nidificati, ma questo gonfia il tuo HTML.

Answer 5

L'unico modo è utilizzare un altro contenitore. Ogni elemento può contenere solo un'immagine di sfondo.

Answer 6

Usa il posizionamento assoluto e un indice z per ottenere il secondo elemento in cima.

Answer 7

testo del link

Il link sopra menzionato descrive meglio cosa stai facendo ...

Answer 8

Non dimenticare che puoi applicare gli stili all'elemento HTML:

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