Transparenz (opacity, rgba, hsla)

Mit Transparenz machst du Elemente ganz oder teilweise durchsichtig. Das ist nützlich für Overlays, dezente Hover-Effekte oder geschichtete Layouts, bei denen der Hintergrund durchscheinen soll.

Was ist Transparenz?

In CSS steuerst du Transparenz vor allem über die Eigenschaft opacity oder über Farbformate mit Alpha-Kanal: rgba() und hsla(). Der Alpha-Wert liegt meist zwischen 0 (vollständig transparent) und 1 (vollständig deckend).

opacity

opacity macht das gesamte Element transparent – inklusive Inhalt, Rahmen und aller Kindelemente. Der Wert reicht von 0 bis 1.

1opacity: 0 bis 1;

1.box {
2    background-color: royalblue;
3    color: white;
4    opacity: 0.5;
5}

rgba und hsla

Mit rgba() und hsla() legst du die Transparenz direkt in der Farbe fest. Nur die Farbe wird transparent – der Text bleibt normal lesbar.

1rgba(rot, grün, blau, alpha)

1.box {
2    background-color: rgba(231, 76, 60, 0.5);
3}

1hsla(farbton, sättigung, helligkeit, alpha)

1.box {
2    background-color: hsla(200, 80%, 50%, 0.5);
3}

opacity vs. rgba und hsla

Der wichtigste Unterschied: opacity betrifft das komplette Element, während rgba und hsla nur die jeweilige Farbe transparent machen.

Für Overlays und farbige Flächen nutzt du meist rgba oder hsla. Für einfache Hover-Effekte auf Buttons oder Icons ist opacity oft die schnellere Lösung.

Praxisbeispiele

Overlay über einem Bild

Ein halbtransparentes Overlay legt sich über ein Bild und macht Text darüber gut lesbar.

1.card {
2    position: relative;
3    background-image: url("bild.jpg");
4}
5
6.overlay {
7    background-color: rgba(0, 0, 0, 0.45);
8    color: white;
9}

Hover-Effekt mit opacity

Beim Hover wird das Element etwas transparenter – ohne die Farbe neu definieren zu müssen.

1.button {
2    opacity: 1;
3    transition: opacity 0.2s ease;
4}
5
6.button:hover {
7    opacity: 0.7;
8}