XML-Technologien / CSS / CSS Kochbuch / Typografie für das Web / HTML-Text mit Grafiken überlagern

HTML-Text mit Grafiken überlagern

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

HTML-Text soll wiederholt mit einer Grafik überlagert werden, um beispielsweise ausgefranste Ecken oder Streifen darzustellen, wie in folgender Abbildung gezeigt.

HTML-Text wird wiederholt durch gestreiftes Bild überlagert

Abbildung: HTML-Text wird wiederholt durch ein gestreiftes Bild überlagert.

Lösung

Fügen Sie nach dem öffnenden Tag für die Überschrift, aber vor dem eigentlichen Text, ein span-Element ein:

<h2><span></span>Designing Instant Gratification</h2>

Im nächsten Schritt verwenden Sie eine Version der Gilder/Levin-Bildersetzungstechnik (siehe das Rezept HTML-Text durch ein Bild ersetzen), um den HTML-Text mit einem ununterbrochenen Muster einer GIF-Datei zu überlagern:

h2 {
 font:3em/1em Times, serif;
 font-weight: bold;
 margin:0;
 position: relative;
 overflow: hidden;
 float: left;
}
h2 span {
 position: absolute;
 width: 100%;
 height: 5em;
 background: url(striped.gif);
}
p {
 clear: left;
}

Diskussion

Der Text in der Überschrift wird als links platzierter Float definiert. Auf diese Weise kann das Hintergrundbild im span-Element mit Hilfe absoluter Positionierung über dem HTML-Text platziert werden.

Normalerweise würde das als Float definierte Element nach links verschoben, wobei der übrige Inhalt dieses Element rechts umfließt. Da aber für den Absatz die Eigenschaft clear definiert wurde, wird dieses Verhalten verhindert.

Die Eigenschaft height erhält den Wert 5em, und overflow wird auf den Wert hidden gesetzt, um zu verhindern, dass das Hintergrundbild auch außerhalb der Überschrift zu sehen ist.

Siehe auch

Die Seite zur Gilder/Levin-Bildersetzungstechnik.

<< zurück

vor >>

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Printlayouts mit CSS & HTML

XML-Grundlagen

ePub

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