CSS Opacity (Transparenz)

Mit der Eigenschaft opacity können wir einstellen, wie transparent ein Element ist. Der Wert liegt zwischen 0 und 1, wobei 0 vollständig transparent und 1 vollständig undurchsichtig ist.

Opacity-Werte

Die Werte von opacity liegen zwischen 0 und 1. Dadurch werden sanfte Übergänge, transparente Ebenen und visuelle Effekte möglich.

Wert	Effekt
1	Vollständig undurchsichtig
0.5	50% Transparenz
0	Vollständig transparent

Grundlegende Beispiele für opacity

Im folgenden Beispiel sehen wir drei Boxen mit unterschiedlichen opacity-Werten: 1, 0.5 und 0.

Von den drei Boxen ist die erste völlig undurchsichtig, die zweite halbtransparent und die dritte unsichtbar.

Opacity für Hover-Effekte

Opacity wird häufig für Hover-Effekte verwendet. Zum Beispiel ist das Element standardmäßig blasser, wird aber beim Darüberfahren vollständig sichtbar.

Tipps zur Verwendung von opacity

Opacity kann auf viele Arten mit anderen CSS-Eigenschaften kombiniert werden. Hier einige Vorschläge:

Verwende es für Overlay-Ebenen, z. B. für abgedunkelte Hintergründe bei Modalfenstern.
Kombiniere es mit transition, um sanfte Überblendungen zu erzeugen.
Vergiss nicht, dass opacity auch auf alle Kindelemente wirkt.