Bilder in CSS überlagern - möglich, um 2 Bilder im selben Element zu platzieren?

Question

Angenommen ich ein Hintergrundbild für eine Web-Seite in CSS wie diese Einstellung:

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

Gibt es eine Möglichkeit, ein zweites Bild auf der Oberseite des desk.gif innerhalb des Körperelements Schicht selbst oder ist die einzige Möglichkeit, eine separate Klasse zu erstellen und die Z-Achse zu verwenden?

Es tut mir leid, es ist eine einfache Frage, aber ich habe versucht, das herauszufinden und obwohl ich es nicht schaffen konnte, habe ich auch keinen klaren Schlag der Idee irgendwo online gefunden .. Also, gibt es einen Weg, oder ist das nur ein Nein?

Danke!

Answer 1

Kurz gesagt, es ist nicht möglich. Sie können dies tun, aber Sie müssen der Seite ein zweites HTML-Objekt hinzufügen, damit es funktioniert. Setzen Sie zum Beispiel einen Div-Block direkt unter Ihrem Körper und weisen Sie diesem Objekt den zweiten Hintergrund zu.

Hoffe, das hilft!

Answer 2

Die einzige Möglichkeit besteht darin, einen anderen Container zu verwenden. Jedes Element darf nur ein Hintergrundbild enthalten.

Answer 3

Verwenden Sie absolute Positionierung und einen Z-Index, um das zweite Element oben zu erhalten.

Answer 4

Vergessen Sie nicht, Sie Stile auf das HTML-Element anwenden können:

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

Answer 5

Layered Hintergründe Teil des CSS3 Working Draft sind aber, soweit ich weiß, die Unterstützung für sie ist begrenzt auf WebKit/KHTML-basierten Browser wie Safari, Chrome, Konqueror und OmniWeb.

Ihr Beispielcode verwenden, würde dies wie folgt aussehen:

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

Ich habe bereits die Lösung in einer doppelten Frage gestellt, sondern für alle, die diese Informationen benötigen kann ich es auch hier posten.

Soweit ich weiß, ist es nicht möglich, es in die gleiche Schicht zu legen, aber es ist möglich, mehrere Bilder in separaten divs übereinander zu legen, und wurde von beliebten Usability-Test-Website Silverback implementiert (Überprüfen Sie den Hintergrund, um zu sehen, wie es geschichtet wurde). Wenn Sie durch den Quellcode schauen, können Sie sehen, dass der Hintergrund aus mehreren Bildern besteht, die übereinander liegen.

Hier ist der Artikel, der zeigt, wie man den Effekt auf Vitamin finden kann. Ein ähnliches Konzept zum Umhüllen dieser "Zwiebelschalen" -Schichten findet sich unter A List Apart.

Answer 7

link text

Link oben erwähnt am besten beschreibt, was Sie bis zu r ...

Answer 8

Heutzutage kann dies (nicht < IE9, afaik) in allen "modernen" Browser erfolgen. Ich kann bestätigen, dass es in Firefox, Opera, Chrome funktioniert. Es gibt keinen Grund, es nicht zu tun, solange Sie eine anständige Ausweichlösung für ältere Browser/IE haben.

Für die Syntax Sie können wählen zwischen

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

und

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

Sie haben nicht die Zeilenumbrüche müssen, aber das Komma ist wichtig.

---

Achtung! Im Folgenden werden zwei Hintergründe erstellen, auch wenn Sie nur eine Bild-URL angegeben:

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

---

Und natürlich gibt es die Alternative ist, verschachtelte Container zu verwenden, aber dies wird Ihre HTML aufblasen.

Answer 9

Im Anschluss an diese Verbindung für Schichten auf Schicht in CSS

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