Deckkraft und RGBA-Transparenz

Die Eigenschaft opacity legt die Transparenz des gesamten Elements einschließlich seiner untergeordneten Elemente und Inhalte fest. Die Werte reichen von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig).

Ein wichtiger Hinweis: opacity wirkt auf den gesamten Elementbaum. Text, Bilder und untergeordnete Elemente innerhalb eines Elements mit opacity: 0.5 sind alle zu 50 % transparent — untergeordnete Elemente können nicht undurchsichtiger als ihr übergeordnetes Element sein.

Wenn nur die Hintergrundfarbe transparent sein soll, ohne Text oder untergeordnete Elemente zu beeinflussen, verwenden Sie statt opacity rgba():

Verwenden Sie folgendes Denkmodell:

• opacity: 0.5 — das gesamte Element und seine untergeordneten Elemente werden transparent
• rgba(r,g,b,0.5) — nur der Farbwert wird transparent; untergeordnete Elemente bleiben unbeeinflusst

Dasselbe Prinzip gilt für hsla(). Das vierte Argument ist der Alphakanal (0–1):

Modernes CSS erlaubt ein Trennzeichen in Form eines Schrägstrichs für Alpha in rgb() und hsl(), ohne die Variante mit „a“:

Alle drei blenden Elemente aus, aber auf unterschiedliche Weise:

• opacity: 0 — unsichtbar, nimmt aber weiterhin Platz ein und ist anklickbar
• visibility: hidden — unsichtbar, nimmt Platz ein und ist nicht anklickbar
• display: none — vollständig aus dem Layout entfernt

Da opacity auf der GPU zusammengesetzt wird, gehört die Eigenschaft zu den kostengünstigsten CSS-Eigenschaften für Animationen. Ein- und Ausblendeffekte sollten immer mit opacity-Übergängen statt mit background-color umgesetzt werden.

Wenn ein Element einen durchscheinenden Hintergrund haben, der Text aber vollständig lesbar bleiben soll, verwenden Sie rgba() für background-color:

Verwenden Sie RGBA in border-color und box-shadow, um dezente transparente Effekte zu erzeugen:

Text mit geringer Deckkraft ist schlechter lesbar und erfüllt möglicherweise die WCAG-Anforderungen an den Farbkontrast nicht. Überprüfen Sie bei Transparenz in Texten immer die Kontrastverhältnisse. Stellen Sie für normalen Text ein Mindestverhältnis von 4,5:1 sicher.

Ein Element hat opacity: 0.3. Was geschieht mit dem darin enthaltenen Text?

opacity macht ein gesamtes Element und seine untergeordneten Elemente transparent. Verwenden Sie rgba() oder hsla() für transparente Farben, ohne untergeordnete Elemente zu beeinflussen. Opacity-Übergänge werden von der GPU beschleunigt und sind performant. Überprüfen Sie bei Transparenz in Texten immer die Kontrastverhältnisse.