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 zuständig für die Deckkraft – die Transparenz.
Das A in HSLA steht für den Alpha-Kanal, der für die Transparenz verantwortlich ist.
Die Angabe der Transparenz (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.
Auch hier ist bei der Schreibweise wichtig, dass bei der CSS3-Anweisung kein Leerzeichen zwischen dem A und der Klammer steht! Die Nachkommazahl für die Deckkraft, muss in englischer Schreibweise, also mit Punkt erfolgen.
Für die Hintergrundfarbe lautet die CSS3-Anweisung:
background-color: hsla( ..., ..., ..., 0.5);
Im Unterschied zu opacity
, wird die Deckkraft nicht weiteren Elemente vererbt.

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 div-Elements, welches opacity
zugewiesen bekommen hat, sind auch transparent.
Nehmen wir den Quellcode vom vorherigen Beispiel.
<!DOCTYPE html>
<html lang="de">
<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.

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:

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.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-