Transparenz: »opacity«, »RGBA« und »HSLA«

Beispiele

Opacity

Wie man im Beispiel gut sieht, wird die Transparenz auf das gesamte Element und deren Inhalte angewendet. Neben der Hintergrundfarbe wird auch der Text transparent.

Opacity mit 30% Transparenz

opacity:.3;

Opacity mit 60% Transparenz

opacity:.6;

Opacity mit 90% Transparenz

opacity:.9;

RGBA

Durch die Verwendung der RGBA-Definition für den Hintergrund wird nur die Hintergrundfarbe transparent; der Text bleibt in der zugewiesen Farbe deckend erhalten.

RGBA mit 30% Transparenz

background: rgba(255, 51, 0, 0.3);

RGBA mit 60% Transparenz

background: rgba(255, 51, 0, 0.6);

RGBA mit 90% Transparenz

background: rgba(255, 51, 0, 0.9);

HSLA

Durch die Verwendung der HSLA-Definition für den Hintergrund wird nur die Hintergrundfarbe transparent; der Text bleibt in der zugewiesen Farbe deckend erhalten.

HSLA mit 30% Transparenz

background: hsla(12,100%,50%,.3);

HSLA mit 60% Transparenz

background: hsla(12,100%,50%,.6);

HSLA mit 90% Transparenz

background: hsla(12,100%,50%,.9);

Mit Opacity, RGBA und HSLA gibt es drei Möglichkeiten, Boxen und andere Elemente transparent erscheinen zu lassen.
Funktionsweise und die Unterschiede der Varianten:

  • Opacity heißt auf Deutsch soviel wie "Deckkraft" und ist eine CSS-Eigenschaft, die Werte zwischen 0 und 1 haben kann. 1 entspricht dabei einer vollständigen Deckkraft und ist nicht durchsichtig, 0 hingegen steht für vollständig durchsichtig. Die Anweisung opacity: 0.7; erzeugt eine 70% Deckkraft, sodass der Hintergrund ein bisschen durchscheint.

  • RGBA ist keine CSS-Eigenschaft, sondern ein in CSS3 definierter, neuer Farbraum, der neben Rot, Grün und Blau noch einen vierten Wert kennt, den »Alpha-Kanal«. Mit diesem wird mit Werten zwischen 0 und 1 die Transparenz der jeweiligen Farbe eingestellt.

  • HSLA ist ebenfalls ein in CSS3 eingeführter Frabraum, der das Farbmodell auf den 3 Werten H (Hue = Farbton), S (Saturation = Sättigung) und L (Luminance = Helligkeit) sowie dem Alphawert A beschreibt.

    Dabei kann der Farbton (H) mögliche Werte von 0 bis 360° (0=Rot, 120=Grün, 240=Blau, 360=Rot) annehmen. Die Sättigung (S) wird als Prozentwert definiert, die Helligkeit (L) wird ebenfalls als Prozentwert definiert, wobei 0% für schwarz und 100% für weiß steht.
    Der Alphawert (A) wird mit Wert zwischen 0.0 (vollständig transparent) und 1.0 (vollständig deckend) definiert.
nach oben