CSS Transparenz • RGBA, HSLA, Opacity

Alphakanal vs opacity

Für Durchsichtigkeit / Deckkraft bzw. Transparenz sorgt das CSS-Color-Modul mit opacity und den 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 #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);

TRAN
SPAR
RENT

.demo { 
    position: relative; 
    margin: 1em auto;
}
.overlay { 
    position: absolute; 
    background: #BE1E3C; 
    background: hsla(350,50%,50%,0.3); 
    color: white; 
    border-top: 8px solid white; 
    border-bottom: 8px solid white;
    transition: background 1s;
}
.over { background: hsla(350,50%,50%,0.9) }

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 Color: HSL oder HSV

CSS HSL-Farbangaben (Farbton, Sättigung und Helligkeit) sind intuitiver als Hex- oder RGB-Farben. Das HSL-Farbmodell trennt Farbe von Helligkeit und Sättigung – Komponenten, die das RGB-Farbmodell nicht kennt.

Da heißt es sofort aufpassen!, denn CSS setzt auf das HSL-Farbmodell, Photoshop, der Color Picker in Mac OS und viele andere Anwendungen hingegen auf HSV. HSL und HSV sind sich sehr ähnlich, aber die Unterschiede sind sichtbar.

Wenn also Farben auf der Webseite mit HTML und CSS nicht so aussehen wie in Photoshop, dann liegt die Diskrepanz in diesem einen Buchstaben L oder V.

color: hsl(321,42%,35%);

Die erste Komponente bestimmt den Farbton (Hue), die zweite die Sättigung (Saturation) und die dritte die Helligkeit (Lightness) der Farbe.

• Der Farbton kann Werte zwischen 0 bis 360 annehmen,
• die Sättigung reicht von 0 bis 100%
• die Helligkeit reicht von 0 bis 100%, wobei 0% Schwarz und 100% Weiß erzeugen. Im HSL-Modell ist die Helligkeit 50% der »Normalwert«.

• Die großen Farbmuster haben jeweils dieselbe Helligkeit und Sättigung
• Die Streifen unter einem Farbmuster haben dieselbe Farbe, aber unterschiedliche Helligkeit und Sättigung.

Bemerkung: Firefox wandelt HSL-Angaben direkt in RGB-Werte um, Safari stellt Farben tatsächlich im HSL-Raum dar. Die Farben werden zwar sowohl in RGB als auch in HSL gleich dargestellt, aber HSL-Angaben können nicht als Basis für Berechnungen dienen.

CSS opacity: Deckkraft von Hintergrundfarben und Bilder

Die Angabe von background (Hintergrund) und color (Rahmen- und Schriftfarbe) gilt nur für das jeweilige Element. CSS opacity bestimmt die Deckkraft / Durchsichtigkeit 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>

Da hilft nur, 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>