Transparente Objekte mit CSS
Stand vom 28.05.2002
Bilder die fast im Hintergrund verschwinden? Jetzt auch mit
CSS? Kein Problem, der Internet Explorer machts möglich.
Fangen wir mit einem Formularfeld an. Das Formularfeld soll leicht verblassen, sodass es nicht so aufdringlich wirkt.
Dem Formularfeld wird ein Style-Attribut gegeben, in welchem die Definitionen gemacht werden. Der Code:
<input type="text" value="Transparenz"
style="filter:Alpha(opacity=25)">
Das Ergebnis:
<input type="text" value="Transparenz"
style="filter:Alpha(opacity=50)">
Die Angabe der Stärke der Transparenz erfolgt mit opacity=50.
Es ist eine prozentuale Angabe, die angibt wie viel Prozent der
ursprünglichen Farbe ausgeblendet werden sollen.
Besonders gut kommt der Effekt bei Elementen, die farbig gestaltet sind.
Ein Beispiel:
<input type="text" value="Transparenz"
style="filter:Alpha(opacity=60); background-color:darkblue;
color:#FFFFFF; border: 1 solid black;">
Zudem können Sie auch ganze Bilder mit diesem Filter bearbeiten,
und das spart Ladezeit.
(tf)
technisch
HTML