CSS Kochbuch

2.22 Die erste Zeile eines Absatzes mit einem Bild versehen

Problem

Sie wollen die erste Zeile eines Absatzes mit einem Bild versehen, wie in Abbildung 2-36 gezeigt.

Abbildung 2-36. Hintergrundbild für die erste Zeile

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 ...