Die erste Zeile eines Absatzes mit einem Bild versehen
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Sie wollen die erste Zeile eines Absatzes mit einem Bild versehen, wie in folgender Abbildung gezeigt.
Abbildung: Hintergrundbild in der ersten Zeile des Absatzes.
Lösung
Verwenden Sie innerhalb des Pseudoelements :first-line die Eigenschaft background-image:
p:first-line {
font-size: 2em;
background-image: url(background.gif);
}Diskussion
Durch das Pseudoelement :first-line können Sie nur Einfluss auf den Text der ersten Zeile eines Elements nehmen, nicht aber auf das Element selbst. Neben background-image unterstützt das Pseudoelement :first-line auch die folgenden Eigenschaften, mit denen Einfluss auf das Design genommen werden kann:
Beachten Sie, dass Internet Explorer 5 das Pseudoelement :first-line nicht kennt.
Siehe auch
Die CSS 2.1-Spezifikation zum Pseudoelement :first-line.
| << 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