Układanie obrazów w CSS - możliwe umieszczenie 2 obrazów w tym samym elemencie?

Question

zakładając mam ustawienie obrazu tła dla strony internetowej w CSS tak:

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

Czy istnieje jakiś sposób, aby warstwa A drugi obraz na górze desk.gif wewnątrz elementu ciała samego, czy jedyny sposób na stworzenie oddzielnej klasy i użycie osi Z?

Przykro mi, to proste pytanie, ale próbowałem to rozgryźć i chociaż nie udało mi się sprawić, że to zadziałało, również nie znalazłem wyraźnego slapdownu tego pomysłu w Internecie. Czy istnieje jakiś sposób, czy może to po prostu nie można zrobić?

Dzięki!

Answer 1

Krótko mówiąc, nie jest to możliwe. Możesz to zrobić, ale musisz dodać do strony drugi obiekt HTML, aby działał. Na przykład umieść blok div tuż poniżej ciała i przypisz drugie tło do tego obiektu.

Mam nadzieję, że to pomoże!

Answer 2

Jedynym sposobem jest użycie innego pojemnika. Każdy element może zawierać tylko jeden obraz tła.

Answer 3

Użyj bezwzględnego pozycjonowania i indeksu z, aby uzyskać drugi element na wierzchu.

Answer 4

Nie zapomnij można zastosować style do elementu HTML:

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

Answer 5

Warstwy tła są częścią CSS3 Working Draft ale, o ile wiem, wsparcie dla nich jest ograniczony do WebKit/KHTML opartej przeglądarki takie jak Safari, Chrome, Konqueror i OmniWeb.

Korzystanie z przykładowy kod, będzie to wyglądać tak:

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 6

Już pisał rozwiązanie w duplikatu pytanie, ale dla każdego, kto może wymagać tej informacji będę go zakładać również tutaj.

O ile mi wiadomo, nie jest możliwe umieszczenie go w tej samej warstwie, ale możliwe jest umieszczenie kilku obrazów w oddzielnych elementach div na sobie i zostało zaimplementowane przez popularną stronę testowania użyteczności Silverback (sprawdź tło, aby zobaczyć, jak zostało ułożone). Jeśli przejrzysz kod źródłowy, zobaczysz, że tło składa się z kilku obrazów, umieszczonych jeden na drugim.

Oto artykuł demonstrujący, jak to zrobić, można znaleźć pod adresem Vitamin. Podobną koncepcję owijania warstw "cebuli" można znaleźć na stronie A List Apart.

Answer 7

link text

Powyższe odnośnik najlepiej opisuje to, co r września ...

Answer 8

Obecnie można to zrobić we wszystkich przeglądarkach "nowoczesnych" (nie < IE9, AFAIK). Mogę potwierdzić, że działa w Firefox, Opera, Chrome. Nie ma powodu, aby tego nie robić, o ile masz przyzwoite rozwiązanie awaryjne dla starszych przeglądarek/IE.

Dla składni można wybrać pomiędzy

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

i

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

Nie trzeba linebreaks, ale przecinek jest ważne.

---

Uwaga! Następujące będzie utworzenie dwóch środowisk, nawet jeśli podano tylko jeden obraz adres:

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

---

I oczywiście, nie jest alternatywą do korzystania zagnieżdżone pojemników, ale będzie to uwędzić html.

Answer 9

wykonując te łącza dla warstw na warstwie w CSS

http://www.handycss.com/tips/layers-on-layer-in-css/