Layering Bilder in CSS - möglich setzen 2 Bilder in demselben Element?

Question

Angenommen, ich bin 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örperelementes Schicht selbst oder ist der einzige Weg, eine eigene Klasse und verwendet, um die Z-Achse zu schaffen?

Sorry, es ist eine einfältige Frage, aber ich habe versucht worden, um dies herauszufinden und obwohl ich nicht in der Lage gewesen, damit es funktioniert, ich habe auch keine klare slapdown der Idee überall online zu finden ... so gibt es eine Art und Weise, oder ist das nur ein nicht tun kann?

Danke!

Answer 1

Kurz gesagt, es ist nicht möglich. Sie können dies tun, aber Sie brauchen ein zweites HTML-Objekt auf der Seite hinzufügen, um es an der Arbeit. So zum Beispiel, setzen Sie einen div-Block direkt unter Ihrem Körper, und weisen Sie den zweiten Hintergrund für das Objekt.

Hope, das hilft!

Answer 2

Layered Hintergründe Teil der CSS3 Working Draft aber wie 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 3

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

Soweit ich bin mir bewusst, es nicht möglich ist, es in der gleichen Schicht zu setzen, aber es ist möglich, mehrere Bilder in separaten divs auf aufeinander zu setzen und durch populären Usability-Tests Website implementiert Silver (überprüfen sie den Hintergrund zu sehen, wie es überlagert wurde). Wenn Sie den Quellcode schauen durch können Sie sehen, dass der Hintergrund von mehreren Bildern aus, auf sie gelegt.

Hier ist der Artikel zeigt, wie die Wirkung zu tun, kann auf Apart .

Answer 4

Heute kann dies in allen "modernen" Browser durchgeführt werden (nicht

Für die Syntax können Sie 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 brauchen nicht die Zeilenumbrüche, 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 verschachtelte Container zu verwenden, aber dies wird Ihre HTML aufblasen.

Answer 5

Die einzige Möglichkeit ist, einen anderen Behälter zu verwenden. Jedes Element kann nur ein Hintergrundbild enthalten.

Answer 6

Verwenden absolute Positionierung und einen z-Index das zweite Element an der Spitze zu erhalten.

Answer 7

Link-Text

Die oben genannten Link beschreibt am besten, was Sie bis zu r ...

Answer 8

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

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