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.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
