CSS/Tutorials/Hintergrund/Image Replacement

Aus selfHTML
Zur Navigation springenZur Suche springen

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

Im ersten Teil unseres Kurses wurden die CSS-Eigenschaften background-color und background-image vorgestellt. In diesem Kapitel sollen nun einige typische Anwendungsfälle aufgezeigt werden.

Dabei soll noch einmal auf den Unterschied zwischen inhaltsbezogenen und Dekorationsgrafiken eingegangen werden. Mit background eingebundene Grafiken dürfen nur dekorativ, d.h. als Verzierung verwendet werden.

Logos einer Firma, Thumbnail-Ansichten eines Bilds sind Teil des Inhalts und sollten mit einem img-Element ausgezeichnet werden. Wenn Webseiten vorgelesen werden, wird dann der Alternativtext der Grafik vorgelesen. Bei Mustern, Verläufen und ähnlichen Dekorationen wäre es nur störend, wenn dies jeweils einzeln vorgelesen würde.

Image Replacement

Unter Image Replacement versteht man das Ersetzen des Inhalts von HTML-Elementen durch Bilder.

Früher boten Bilder mehr Freiheiten, z.B. bei der Typographie, sodass Überschriften und Menü-Elemente nicht mit den dafür vorgesehenen HTML-Elementen, sondern mit eigens in Bildbearbeitungsprogrammen erstellten Grafiken dargestellt wurden. Problem war neben dem hohen Wartungsaufwand (eine Farbänderung musste in Photoshop durchgeführt werden; die geänderte Grafik musste auf den Server hochgeladen werden, etc) auch die mangelnde Zugänglichkeit durch Screenreader, aber auch im web.archive.org, wenn Überschriften nur durch ein nicht mehr vorhandenes Bild dargestellt werden.

Mit CSS kann man diese Quadratur des Kreises erreichen:

  • das Dokument wird auf einem nichtvisuellen Ausgabemedium (Screenreader, Braille Terminal ) semantisch korrekt ausgegeben
  • eine Suchmaschine soll den Inhalt der Webseite erkennen
  • für ein visuelles Ausgabemedium (Bildschirm, Drucker) soll stattdessen die Grafik dargestellt werden

Ausblenden des Texts

Die Herausforderung ist nicht etwa das Einsetzen des Hintergrundbilds, sondern das optische „Ausblenden“ des Texts, der aber für Suchmaschinen und Screenreader noch auffindbar sein muss:

Ersetzung von Text durch eine Grafik
.ohne-text { 
  border: 0; 
  font: 0/0 a; 
  text-shadow: none; 
  color: transparent; 
  background: url("image-replacement.png"); 
}
In diesem Beispiel werden alle Festlegungen für Text, Schatten und Rahmen auf 0, bzw. transparent gesetzt, sodass der Text auf dem Bildschirm unsichtbar wird und durch das Hintergrundbild ersetzt werden kann.

Alternativen

Heute ist Image Replacement weitgehend aus der Mode gekommen, da CSS3 viele Möglichkeiten bietet, die früher nur mit Photoshop erreicht wurden:

Empfehlung: Nutzen Sie die Möglichkeiten, die Ihnen CSS bietet:
für Hintergründe

Alternativ können Sie SVG einbinden:

Anwendungsbeispiel

Das Tutorial SVG/Tutorials/Texteffekte bietet viele Anregungen für grafische Hintergrundeffekte. Gerade für Anfänger ist das Hantieren mit den ihnen unbekannten Elementen eine Herausforderung.

Anwenderfreundlicher ist das Verwenden eigener SVG-Grafiken, die dann mittels Image Replacement anstelle des reinen Texts dargestellt werden.

Image Replacement {{#BeispielUrl:Beispiel:CSS-Hintergrund-5.html}}
.ohne-text { 
  border: 0; 
  font: 0/0 a; 
  text-shadow: none; 
  color: transparent; 
  background: url(//wiki.selfhtml.org/images/7/77/Selfhtml-gepunktet.svg);
  width: 800px;
  height:110px;
}

Die Überschrift besteht aus einem span-Element, dessen Textinhalt durch eine Hintergundgrafik, hier ein SVG, ersetzt wird.

Beachten Sie: Da die Schriftgröße auf 0 gesetzt wird, sind hier Werte in em nicht möglich. Verwenden Sie px oder rem.


Weblinks