Alphatransparenzen im Webdesign
Ein gestalterisches Mittel sind die translucidus-Effekte. Teile des Layouts sind bis zu einem gewissen Grad durchscheinend. Besonders in Microsofts Betriebssystem Vista kann man das regelmäßig besichtigen. Im Printdesign ist es durch die Ebenentechnik kinderleicht umzusetzen. Im Webdesign hat man bisher durch den geschickten Einsatz von aufgehellten Grafiken versucht einen ähnlichen Effekt zu erzeugen oder ist auf Gifs ausgewichen, in denen jedes zweite Pixel volltransparent war. Mit dem Internet Explorer 7 hat endlich auch die letzte Browserfamilie volle Unterstützung für PNGs mitgebracht und damit das layouten wesentlich erleichtert. Bei Farbverläufen ist das auch das geeignete Mittel.
Bei überwiegend einfarbigen Flächen ist aber die Verwendung der CSS3 Eigenschaft opacity, die bereits jetzt von den meisten Browsern unterstützt wird. Eine Anweisung von opacity:.80;sorgt also für eine 80% Deckung.Natürlich bilden alle IE bis 8 noch eine Ausnahme, was aber hier nicht problematisch ist, da der selbe Effekt mit der filter-Eigenschaft erreicht wierden kann filter:alpha(opacity=80). Diese gehört selbstverständlich in conditional comments.
Abschließend noch ein eigenes Beispiel. Man sieht auf dem Screenshot, wie der Text unter der Navigation durchscheint. 
Fazit: Auch wenn der CSS3-Standard noch nicht verabschiedet ist, kann man opacity schon gut verwenden und spart sich damit jede Menge Bilder.
Nachtrag: Bei unseren Experimenten zur pixelfans-Seite ist uns noch etwas aufgefallen. Die Beta 2 des Internet Explorer 8 benötigt offensichtlich noch 
Anführungszeichen, d.h. filter:“alpha(opacity=80)“. Ohne Anführungszeichen bleibt die Deckung bei 100%. Opera 9.3 stellt zwar die Transparenzen des Containers korrekt dar, scheint aber per CSS eingebundene Bilder in diesem Container mit 100% Deckung darzustellen, wie nebenstehender Screenshot verdeutlicht.Safari und der Firefox stellen es korrekt dar.
geschrieben von Pawel