CSS3 HSLA-Farbschema: Farben mit Transparenz

Zu unserem im letzten Kapitel angesehenen HSL-Farbschema wird ein weiterer Wert mitgegeben. Es wird zum HSLA-Farbschema. Der vierte Wert ist für die Deckkraft – die Transparenz.

Die Angabe der Deckkraft erfolgt von 0 bis 1 wie wir es bereits von der CSS3-Anweisung opacity kennen. 1 steht für volle Deckkraft (also keine Transparenz) und 0 für keine Deckkraft, also komplett Transparent.

Das A steht für den Alpha-Kanal, der für die Transparenz verantwortlich ist.

Auch hier ist bei der Schreibweise wichtig, dass bei der CSS3-Anweisung kein Leerzeichen zwischen dem A und der Klammer ist. Und die Nachkommazahl für die Deckkraft muss in englischer Schreibweise, also mit Punkt erfolgen.

Für die Hintergrundfarbe ist die CSS3-Anweisung:

background-color: hsla( ..., ..., ..., 0.5);

Im Unterschied zu opacity wird die Deckkraft nicht weiteren Elemente vererbt.

Vergleich Deckkraft zwischen opacity und HSLA
Vergleich Deckkraft zwischen opacity und HSLA

Zum Testen nehmen wir exakt die Aufgabe von opacity. Dort war der Effekt, dass alle Elemente innerhalb eines (halb)durchsichtigen Elementes die opacity geerbt haben. Sprich Texte etc. innerhalb eines divs, welches opacity zugewiesen bekommen hat, sind auch transparent.

Nehmen wir den Quellcode vom Beispiel vorher.

<!DOCTYPE html>
<html>
<head>
    <title>Beispiel zu HSLA-Farbschema</title>
    <meta charset="UTF-8" />
    <link href="css3-hsla-transparenz.css"
          rel="stylesheet">
</head>
<body>
 
<h1>Beispiel zu HSLA-Farbschema</h1>
 
<div id="box1" class="boxgroesse">
hier kommt der 1. Inhalt
</div>
 
<div id="box2" class="boxgroesse">
hier kommt der 2. Inhalt
</div>
 
<div id="box3" class="boxgroesse">
hier kommt der 3. Inhalt
</div>
 
</body>
</html>

Und den dazugehörigen CSS-Code

body {
    background-image: url(hg-blaetter.jpg);
}
 
.boxgroesse {
  width: 250px;
  height: 175px;
  font-size: 30pt;
  color: white;
  opacity: 0.5;
}
 
#box1 {
    background-color: red;
    position: absolute;
    top: 90px;
    left: 100px;
}
 
#box2 {
    background-color: green;
    position: absolute;
    top: 70px;
    left: 300px;
}
 
#box3 {
    background-color: blue;
    position: absolute;
    top: 210px;
    left: 200px;
}

Bei der Klasse .boxgroesse werden wir die opacity herausnehmen.

Die HSLA-Farben werden nun bei #box1 bis #box3 hinterlegt. Dabei wird allerdings die alte background-color nicht ersetzt sondern belassen. Das ist wichtig, falls die Seite mit einem älteren Browser angesehen wird, welcher die neuen CSS3-Anweisungen nicht kennt. Somit kann der alte Browser wenigstens die Farbe anzeigen, allerdings ohne den Transparenz-Effekt.

Wichtig ist, dass nach der alten Farb-Anweisung die neue kommt. Somit „überschreibt“ die neue CSS3-Anweisung die alte background-color-Anweisung und in neuen Browsern wird dann die Farbe mit Transparenz angezeigt.

#box1 {
    background-color: red;
    background-color: hsla(0, 100%, 50%, 0.5);
    position: absolute;
    top: 90px;
    left: 100px;
}

Dadurch erhalten wir nun die Hintergrundfarbe durchsichtig, die Schrift allerdings bleibt undurchsichtig.

Hintergrundfarbe rot nun mit 50% Transparenz über hsla(0,100%,50%,0.5)
Hintergrundfarbe rot nun mit 50% Transparenz über hsla(0,100%,50%,0.5)

Für die restlichen Boxen werden bei den entsprechenden ID-Bereichen die hsla-Anweisungen auch mitgegeben.

  • Für grün: hsla(140, 100%, 50%, 0.5)
  • Für blau: hsla(210, 100%, 50%, 0.5)

Das fertige Ergebnis:

Ergebnis des CSS3-HSLA-Beispiels
Ergebnis des CSS3-HSLA-Beispiels

Der komplette CSS3-Quellcode

body {
    background-image: url(hg-blaetter.jpg);
}
 
.boxgroesse {
    width: 250px;
    height: 175px;
    font-size: 30pt;
    color: white;
}
 
#box1 {
    background-color: red;
    background-color: hsla(0, 100%, 50%, 0.5);
    position: absolute;
    top: 90px;
    left: 100px;
}
 
#box2 {
    background-color: green;
    background-color: hsla(140, 100%, 50%, 0.5);
    position: absolute;
    top: 70px;
    left: 300px;
}
 
#box3 {
    background-color: blue;
    background-color: hsla(210, 100%, 50%, 0.5);
    position: absolute;
    top: 210px;
    left: 200px;
}

Farbangaben über RGB

Falls man RGB-Angaben bevorzugt, ist das in selber Bauart möglich. Der Aufbau der CSS3-Anweisung ist dann für die Hintergrundfarbe:

background-color: rgba(255,0,0,0.5);

Für RGB werden die Farben von 0 bis 255 angegeben.