PNG-Transparenz – Info

zur IE-Übersicht

Das Web lebt von Bildern. Die machen zwar nicht seinen Informationsgehalt aus, aber ohne sie wäre es doch eher langweilig (wenngleich der Blick durch einen Textbrowser – etwa lynx – auf eine Webseite doch sehr erhellend sein kann. Bilder brauchen Dateiformate. Unterschiedliche Formate bedienen unterschiedliche Anforderungen. Nicht jeder Browser versteht alle Formate. Meines Wissens kann man bei Browsern nur JPEG, GIF und PNG voraussetzen. PNG ist das neuste Format und hat eine Reihe von Vorteilen. Informationen zu PNG finden sich auf der Webseite des W3C. Entscheidend ist, dass PNG im Oktober 1996 spezifiziert und im November 2003 konkretisiert wurde.

Ein – gerade beim Design von Webseiten – wichtiger Aspekt von Bildern ist die Transparenz. Man kann für einen Pixel nicht nur die Farbe angeben, sondern auch, wie stark er deckt. Deckt er mit weniger als 100%, dann vermischt sich seine Farbe mit der des Hintergrunds, wie bei einer transparenten Folie. Von besonderer Bedeutung sind völlig transparente Pixel. Bilder sind an sich nämlich immer rechteckig. Wenn man nun eine andere Form auf einen anderen Hintergrund bekommen will, dann muss man den Rest, der in dem Rechteck der Bilddatei nach Abzug der Form übrigbleibt, per Transparenz unsichtbar machen. Ein kleines Beispiel:

Schriftzug

ein Schriftzug

Hintergrund

die Hintergrundfarbe der Webseite

Kombination mit Transparenz

das Ziel ist, nur den Schriftzug auf dem Hintergrund zu haben; dafür muss man die irrelevanten Pixel des Vordergrundbilds transparent machen

Kombination ohne Transparenz

ohne Transparenz hat man den unerwünschten Hintergrund des Vordergrundbilds im Ergebnis

Die Ungeheuerlichkeit beim IE ist nun, dass er zwar PNG kennt, aber mit Transparenz nicht umgehen kann. Dass sie dieses Problem nicht behoben haben, ist nun wirklich gar nicht zu rechtfertigen, denn darauf konnten Webdesigner sich gar nicht einstellen (mal abgesehen von der Vermeidung von PNG-Bildern mit Transparenz).

Codebeispiel

<div style="background-image:url(./png.hintergrund-asymmetrisch.png);padding:0;height:200px;">
<img src="png.schrift-transparent.png" alt="Schrift" style="margin:0 0 0 20%;vertical-align:middle;" />
</div>

zur Demo