Transparente Objekte mit CSS

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)

This entry was posted in HTML Tricks. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *