HTML-Text durch ein Bild ersetzen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

HTML-Text, wie z.B. die Überschrift in der folgenden Abbildung, soll mit einem Bild überlagert werden, um größere grafische oder typografische Freiheit bei der Gestaltung zu haben.

Abbildung: Die Standarddarstellung der textbasierten Überschrift.

Lösung

Verwenden Sie die Gilder/Levin-Bildersetzungstechnik.

Zu Beginn fügen Sie vor dem HTML-Text ein span-Element ein:

Im nächsten Schritt definieren Sie die Breite und Höhe des h1-Elements, um die Dimensionen des Ersetzungsbildes festzulegen. Gleichzeitig erhält die Eigenschaft position den Wert relative:

Als Nächstes legen Sie die Positionierung des span-Elements mit dem Wert absolute fest. Durch die Anpassung von Höhe und Breite des span-Elements innerhalb der Überschrift (h1) liegt das span-Element nun über dem HTML-Text. Der letzte Schritt besteht schließlich darin, das Ersetzungsbild mit Hilfe der Eigenschaft background festzulegen (siehe die folgende Abbildung):

Abbildung: Der HTML-Text wird durch eine Grafik ersetzt.

Diskussion

Für die Web-Entwicklung gibt es mittlerweile eine ganze Reihe von Bildersetzungstechniken, die alle ihre eigenen Vor- und Nachteile haben.

Ursprung der Bildersetzungsmethode

Todd Fahrner ist eine der Personen, denen das ursprüngliche Konzept der Bildersetzungstechnik zugeschrieben wird.

Das nach ihm benannte Fahrner Image Replacement (FIR) verwendet ebenfalls ein nichtsemantisches span-Element. Bei dieser Methode umgibt das span-Element jedoch den Inhalt:

Das Ersetzungsbild wird in diesem Fall als Hintergrundbild für das h1-Element definiert, während der Text versteckt wird:

Nachteil der FIR-Methode

Die einfache Implementierung der FIR-Methode machte sie bei Webentwicklern sehr beliebt. Allerdings wurde auf diese Art behandelter HTML-Text oft von Bildschirmleseprogrammen für Menschen mit Sehbehinderungen "übersehen", da festgelegt wurde, dass der Text im span-Element nicht dargestellt werden soll (display: none;). Dadurch kann wichtiger Text für einen Teil der Besucher der Site verloren gehen.

Die Phark-Bildersetzungsmethode

Sowohl die FIR- als auch die Gilder/Levin-Ersetzungsmethoden verwenden ein semantisch nicht notwendiges span-Tag, um ihr Ziel zu erreichen. Eine weitere Ersetzungstechnik, die von Mike Rundle von phark.net erfunden wurde, kommt ohne das zusätzliche span-Tag aus.

Passen Sie hierfür zuerst den HTML-Text an, indem Sie das span-Tag wieder entfernen:

In den CSS-Regeln verwenden Sie einen negativen Wert für die Eigenschaft text-indent, um den Text zu verstecken. Auf diese Weise ist die Verwendung von display:none nicht mehr nötig:

Wie auch die anderen Methoden funktioniert die Phark-Ersetzungstechnik recht gut. Ihr Nachteil besteht jedoch darin, dass der HTML-Text nicht zu sehen ist, wenn die Darstellung von Grafiken im Browser deaktiviert wurde.

Bildersetzung mit CSS 3

Die CSS 3-Spezifikation bietet eine einfache Methode zur Bildersetzung, sofern Browser diese jemals implementieren. Um beispielsweise den Inhalt eines h1-Tags durch ein Bild zu ersetzen, würde in diesem Fall der folgende CSS-Code ausreichen:

In der Spezifikation wird zudem nicht eingeschränkt, welche Art von Multimediadaten durch die Eigenschaft content unterstützt werden soll. Theoretisch könnte ein Webentwickler also einen QuickTime-Film anstelle des animierten GIFs verwenden:

Allerdings wird die CSS 3-Spezifikation auch in modernen Browsern nur sehr begrenzt unterstützt. Zudem befindet sich die Spezifikation für CSS 3 noch in der Entwicklungsphase.

Siehe auch

Die CSS 3-Spezifikation für Informationen über das Einfügen von Inhalten.