Nachdem ich wiederholt gefragt wurde, wie man die Transparenz mit CSS beeinflussen kann werde ich hier ein kurzes Beispiel vorstellen 😉
<html>
<head>
<style type="text/css">
.sidebar a {opacity:0.4; -moz-opacity:0.4; -khtml-opacity:0.4; filter:alpha(opacity=40; );}
.sidebar a:hover {opacity:1.0; -moz-opacity:1.0; -khtml-opacity:1.0; filter:alpha(opacity=100; ); }
</style> </head> <body> <div class="sidebar">
<a href="http:/ /validator.w3.org/check?uri=referer" target="_blank">Das ist ein Text</a>
</div>
</body>
</html>
Die Transparenz wird mit den Opacity Eigenschaften festgelegt. Sicher fragst du dich nun, warum ich so viele opacity Versionen angeben habe.
ist für Mozilla und Firefox kompatible Browser
opacity:0.4; -moz-opacity:0.4;ist für Microsoft Internet Explorer und dessen Abgeleitete
-khtml-opacity:0.4;Ist für Konqueror und Co
filter:alpha(opacity=100; );
Wie man sieht benötigen die ersten beiden Versionen Werte von 0…1 und der IE benötigt Werte von 0…100.
Um alle Browser zu bedienen, sollte man alle Varianten in das CSS einbauen.
Einen Nachteil haben jedoch alle Varianten, keine ist offiziell vom W3C authorisiert und keine wird von Opera unterstützt. Viel Spaß beim Experimentieren: Beispiel Quellcode