tutorials - Transparenz mit CSS

Transparenz mit CSS

-moz-opacity stellt die Transparenz (Deckkraft) von Hintergrundbildern, -farben, Textfarben und Rahmen eines Elements und all seinen Unter-Elementen ein. Transparenz bedeutet nichts anderes, als dass ein Element ganz oder teilweise durchsichtig wird und der Hintergrund und darunter liegende Elemente durchscheinen.
-moz-opacity entspricht der CSS3-Eigenschaft

So ist es möglich einer Tabelle eine bestimmte Transparenz zu verleihen.

Werte: Zahl - Werte von 0.00 (totale Transparenz) bis 1.00 (keine Transparenz)

Prozentangaben funktionieren nicht mehr ab Mozilla 1.5. - deshalb sollten ausschließlich Zahlen-Werte verwendet werden.

Anwendbar auf alle Elemente - wir müssen allerdings für die anderen Browser auch jeweils einen Code eingeben -

im Internet-Explorer filter: alpha

im Opera: opacity

Folgendes muss in den Code mit eingebaut werden:

filter: alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;

Dies ist der Code für Mozilla Firefox, Internet Explorer und Opera.

Mozilla Firefox

-moz-opacity: 0.75;

Hier muss der Wert 0.75 angepasst werden. 100% Transparenz wäre dann 1 und 50% wäre 0.5

Internet Explorer

filter: alpha(opacity=75);

Hier muss der Wert 75 angepasst werden. 100% Transparenz wäre dann 100 und 50% wären dann 50

Opera

opacity: 0.75;

Hier muss der Wert 0.75 angepasst werden. 100% Transparenz wäre dann 1 und 50% wäre 0.5

Beispiele:

Einzeln:

td.nav{background-image: none;background-color:#ff00ff;opacity: 0.75;}

td.nav{background-image: none;background-color:#ff00ff;filter: alpha(opacity=75;}

td.nav{background-image: none;background-color:#ff00ff;-moz-opacity: 0.75;}

Zusammen:

td.nav{background-image: none;background-color:#ff00ff;filter: alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}

So sieht dann unsere Seite aus (75%):