Beispiele für transparente GIF-oder PNG-Grafiken

Zur Veranschaulichung der Transparenz ist der Hintergrund dieser Seite animiert.

Ältere Browser können häufig transparente Grafiken im PNG-Format nicht korrekt darstellen. Mit dem folgenden Bildbeispiel kann man überprüfen, ob der Browser transparente PNG's richtig darstellt. Alle drei Abbildungen sehen bei korrekter Darstellung gleich aus:

Grafik im GIF-Format PNG-Grafik (indizierte Palette) PNG-Grafik (truecolor)

Die folgenden Beispiele wurden alle mit Grafiken im GIF-Format realisiert:


Text auf transparentem Teilhintergrund

Der Quellcode lautet: <div style="background-image:url(truchet.gif); margin:30px; padding:40px"> Text... </div>