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%):






 
 
Aktualisieren # Diese Seite Drucken ein Bild Zurück Vor ein Bild ein Bild ein Bild nur IE

Impressum | Rechtliche Hinweise | News

© success4you , Tutorials-Area 2007

 
 
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=
http://www.bambusratte.com/taf.php?%20bgcolor=c5c5c5&txtcolor=000000&anrede=s&site=http:tutorials-%20area.de.tl&bgpic=http:img.webme.com/pic/t/tutorials-area/tutback2.gif&nametaf=Tell-A-Friend