Mehrere Hintergrundbilder für einen CSS-Selektor definieren
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Sie wollen einem CSS-Selektor mehr als ein Hintergrundbild zuweisen.
Lösung
Während dieses Buch geschrieben wurde, hat Safari für Macintosh die CSS 3-Spezifikation für die Zuweisung mehrerer Hintergrundbilder an einen CSS-Selektor implementiert.
In CSS 3 soll es möglich sein, der Kurzschrift-Eigenschaft background mehrere Werte für Hintergrundbilder, durch Kommata getrennt, zu übergeben (siehe die folgende Abbildung):
h2 {
padding-top: 72px; /* Genügend große Innenabstände für die Bilder */
text-align: center;
background: url(plane.gif) center no-repeat,
url(mail.gif) top center no-repeat,
url(printer.gif) 40% 24px no-repeat,
url(gift.gif) 60% 24px no-repeat;
}
Abbildung: Mehrere Icons werden als Hintergrundbilder für die Überschrift definiert.
Diskussion
Wie bei den meisten Kurzschrift-Eigenschaften lässt sich auch der Code für multiple Hintergrundbilder auf einzelne CSS-Deklarationen verteilen:
h2 {
padding-top: 72px; /* Genügend große Innenabstände für die Bilder */
text-align: center;
background: url(plane.gif), url(mail.gif), url(printer.gif), url(gift.gif);
background-position: center, top center, 40% 24px, 60% 24px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}Da alle Hintergrundbilder in der CSS-Regel nicht gekachelt werden sollen, reicht die einmalige Definition des Wertes no-repeat. Diese wird für alle Hintergrundbilder gemeinsam verwendet:
h2 {
padding-top: 72px; /* Genügend große Innenabstände für die Bilder */
text-align: center;
background: url(plane.gif), url(mail.gif), url(printer.gif), url(gift.gif);
background-position: center, top center, 40% 24px, 60% 24px;
background-repeat: no-repeat;
}Sofern alle verwendeten Hintergrundbilder den gleichen Wert erhalten sollen, kann diese Schreibweise für alle Eigenschaften verwendet werden, die sich auf CSS-Hintergründe beziehen.
Bis die CSS 3-Spezifikation auch von anderen Browsern unterstützt wird, besteht die einzige Möglichkeit in der Verwendung einzelner Elemente, die jeweils ein eigenes Hintergrundbild erhalten. Weitere Informationen zu diesen Techniken finden Sie in den Rezepten Abgerundete Ecken (Sliding Doors-Technik) und Abgerundete Ecken (Mountaintop-Technik) für die Erzeugung von abgerundeten Ecken mit zusätzlichem Markup-Code.
Siehe auch
Die CSS 3-Spezifikation zum "Schichten" (wörtlich "layering") von Bildern.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln