Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 48
Zur Übersicht

48. Durchsichtigkeit (Opazität) anpassen (24.01.2001)

Die IE- und auch die Netscape-/Mozilla-Entwickler haben Möglichkeiten zur Definition der so genannten Opazität (Opacity) implementiert. Darunter wird die Durchsichtigkeit (Transparenz) von Objekten verstanden. Je höher dieser Wert ist, desto weniger durchsichtig erscheinen z. B. grafische Elemente. Legt man eine Skala von 0 (bzw. 0%) bis 1 (bzw. 100%) zugrunde, dann bedeutet 0 vollständige Transparenz und 1 vollständige Undurchsichtigkeit. Die offizielle CSS-Eigenschaft opacity soll in CSS3 eingeführt werden.

Im IE steht bereits die Methode
Filter: Alpha(opacity=x) | x=Prozentwert ohne %-Zeichen
zur Verfügung, während Netscape 6 / Mozilla die Eigenschaft 
-moz-opacity: x | x in Prozent oder 0...1
kennen.

Zur praktischen Anwendung lassen sich beide Angaben kombinieren. Beispiel 48 zeigt einen damit realisierten Farbverlauf, wobei auf einem blauen DIV-Block 11 rot gefärbte DIV-Blöcke mit Opacity-Werten von 0% bis 100% liegen.

Beispiel 48 - Opazität (IE 5.5)


Netscape 6 / Mozilla haben offenbar erhebliche Probleme mit diesem Beispiel, sie stürzen unter Windows 95, 98SE und 2000 sofort mit einem GPF in einer Grafikbibliothek ab.
Beim systematischen Auseinandernehmen des Codes stellte sich heraus, dass es offenbar an den DIVs selbst liegt. Beim Platzieren von 1 bis 3 Blöcken auf dem blauen Hintergrundblock, sind die abgestuften Rottöne zu sehen. Erstaunlicherweise ließen sich die Browser nach dem Laden eines so präparierten Dokuments zum Anzeigen der kompletten Online-Version überreden, wobei dieser Screenshot im Mozilla 0.6 gelang.