Transparenzen mit Opacity

Opacity ist schon fast ein Oldtimer, immerhin unterstützt der Firefox Browser diese CSS-Eigenschaft schon seit einer halben Ewigkeit. Doch zum Standard hat sich diese CSS-Eigenschaft erst mit CSS3 gemausert.

Während der Firefox diese CSS-Eigenschaft schon seit der Version 2.0 unterstützt, kann Microsofts Internet Explorer erst seit der 9er Version mit einer vergleichbaren Leistung aufwarten. Bei älteren IE-Versionen musst man auf einen entsprechenden Filter ausweichen.

Grundlagen zu Opacity

Mit opacity wird angegeben, inwieweit ein Element einer HTML-Seite opaque (zu deutsch etwa: undurchlässig, blickdicht, undurchsichtig) ist und darunterliegende Elemente durchscheinen. Ist der Wert=1 wird der Hintergrund vollständig überdeckt, bei einem Wert von 0 ist das Objekt gar nicht zu sehen.

Wie bereits beschrieben, muss man für etwas älterer Versionen des Internet Explorer noch eine Extrawurst braten. Daher sieht ein Codebeispiel so aus:

.opacity50{
opacity:0.5;
filter: alpha(opacity=50); /*alle IE vor Version 9 */
zoom: 1; /* wichtig alle IE vor Version 8 */
}

Man sieht an diesem Beispiel aber auch gleich die Nachteile der Opacity-Eigenschaft: sie bezieht sich nämlich auch auf die Schrift, die damit ebenfalls durchscheinend wird und damit schlechter lesbar. Man sollte daher, vor allem wenn es Elemente mit Text geht, eher einen Wert von 75% oder mehr verwenden, und bei der Schriftgröße und -farbe zusätzlich für gute Lesbarkeit sorgen.

Überlappungen und Farben

Wenn sich Opacity-Bereiche überlappen, dann treten Vermischungseffekte auf. So wird bei diesem Farbbeispiel sichtbar, dass sich im Überlappungsbereich rot und blau zu violett vermischen.

Praktische Anwendungsbeispiele

Bei den bisherigen Beispielen wurde auch deutlich, dass eine unreflektierte Anwendung von opacity die Lesbarkeit der Textseite beeinträchtigen. Daher will ich hier zwei Beispiele vorstellen, deren Prinzipien auch praktisch sinnvoll sein können. In beiden Fällen geht es darum, bestimmte Elemente einer Webseite hervorzuheben. Im ersten Praxisbeispiel werden div-Abschnitte beim Überfahren mit der Maus besser lesbar. Dazu wird die Pseudoklasse hover genutzt. Wenn beispielsweise für ein Element folgende normale Klassendefinition zur Anwendung kommt:

.opacity50{
padding:5px;
height:100px;
background-color:#888;
opacity:0.5;
filter: alpha(opacity=50); /*alle IE vor Version 9 */
zoom: 1; /* wichtig alle IE vor Version 8 */
}

kann die ergänzende Festlegung so aussehen:

.opacity50:hover{
opacity:1;
filter: alpha(opacity=50); /*alle IE vor Version 9 */
zoom: 1; /* wichtig alle IE vor Version 8 */
}

Was mit Textabschnitten funktioniert, klappt auch mit Bildern. Dazu wird eine Klasse bildmithover so festgelegt:

.bildmithover{
opacity:0.5;
filter: alpha(opacity=50); /*alle IE vor Version 9 */
zoom: 1; /* wichtig alle IE vor Version 8 */
}

.bildmithover:hover{
opacity:1;
filter: alpha(opacity=100); /*alle IE vor Version 9 */
zoom: 1; /* wichtig alle IE vor Version 8 */
}

und jedem hervorzuhebenden Bild mitgegeben. Möglicherweise ist eine derartige Hervorhebung besonders dann sinnvoll, wenn diese Bilder verlinkt sind.

Möglicherweise wird der plötzliche Übergang zwischen dem Normalzustand und dem hover-Zustand als nicht sehr elegant empfunden. Hier kann die Nutzung der verschiedenen CSS3-Animationsmöglichkeiten zu einer gefälligeren Lösung verhelfen. Ich verweise in diesem Zusammenhang auf die Seiten zu den Übergängen mit transitionund zu den Keyframe Animationen