CSS Transparenz • RGBA, HSLA, Opacity

Alphakanal vs opacity

Opacity ist das Gegenteil von Transparenz – der Grad der Deckkraft. CSS opacity wirkt auf das vollständige Element. Für Durchsichtigkeit / Deckkraft bzw. Transparenz sorgt das CSS-Color-Modul mit opacity und dem Alphakanal. opacity setzt einen Text mitsamt Hintergrundfarbe sowie Bilder auf vollkommen undurchsichtig (opacity:1) oder durchsichtig (opacity:0). In dieser Hinsicht ist opacity das Gegenteil von transparent.

Der Alphakanal – das a in rgba, hsla und das XX in #rrggbbXX – gibt die Transparenz einer Farbe mit Werten zwischen 0 und 1 an. 0 ist vollständig transparent oder durchsichtig, 1 ist voll deckend oder opakt. Alles dazwischen ist halb deckend oder semitransparent und läßt den Hintergrund durchscheinen.

background: rgb(220,160,140);
background: rgba(220,160,140,0.5);

background: oklch(0.6 0.2 240;
background: oklch(0.6 0.2 240 / 0.5);

TRAN
SPAR
RENT

.overlay {
     Transparenz-Komponente ──┐
                              ▼ 
	background: oklch(1 0 0 / 0.2);
    color: white; 
    border-top: 8px solid white; 
    border-bottom: 8px solid white;
    transition: background 1s;
}
.over { background: oklch(1 0 0); }

Transparenz ist animierbar: transition: background 1s verringert die Transparenz beim Hovern mit der Maus oder bei einem Touch durch den weichen Übergang von hsla(350,50%,50%,0.3) auf hsla(350,50%,50%,0.9).

Hex Color mit Transparenz-Komponente

Auch die hexadezimale Schreibweise für color unterstützt heute Transparenz – nach dem # und den 6 Stellen (3x2 für Rot, Grün und Blau) folgen zwei Stellen für die Transparenz. Dabei steht #RRGGBB00 für vollkommen transparent und #RRGGBBff für opakt oder undurchsichtig.

CSS opacity: Deckkraft von Hintergrundfarben und Bildern

opacity steuert die Transparenz eines Elements und nimmt Werte zwischen 0 (komplett transparent) und 1 (komplett sichtbar) an. Während die Angabe von background (Hintergrund) und color (Rahmen- und Schriftfarbe) nur für das jeweilige Element gilt, bestimmt opacity die Deckkraft sowohl von Farben als auch von Bildern.

opacity vererbt sich auf die inneliegenden Kinder, so dass der Text innerhalb eines Blocks mit opacity ebenfalls semitransparent wird – ein Effekt, der nicht immer erwünscht ist.

TARTUFO

Herbe Süße

Hovern

.showcase { position: relative; opacity: 1; transition: opacity 1s; }
.showcase .overlay { position: absolute; }
.showcase .overbox { position: absolute;  }
.showtoggle { opacity: 0.5; }

<div class="showcase">
   <img src="tartufo.webP" width="800" height="866" alt="tartufo">
   <div class="overlay">TARTUFO</div>
   <div class="overbox">Herbe Süße</div>
</div>

Wie vermeidet man, dass alle Elemente eines Blocks mit opacity leicht durchsichtig werden? Da hilft es, zusätzlich zum semi-transparenten Block einen weiteren Block (ohne Hintergrund) absolut über den semi-transparenten Block zu platzieren. In den zweiten Block wird der Text gesetzt und erscheint dann opakt, also nicht durchsichtig.

TARTUFO

Herbe Süße

.showdouble { position: relative;  }
.singlefade {opacity: 1; transition: opacity 1s; }
.showdouble .overlay { position: absolute;  }
.showdouble .overbox { position: absolute; }
.milky { opacity: 0.5; }

<div class="showdouble">
    <div class="singlefade">
        <img src="tartufo.webP" width="800" height="866" alt="tartufo">
    </div>
    <div class="opact">
        <div class="overlay">TARTUFO</div>
        <div class="overbox">Herbe Süße</div>
    </div>
</div>