Transparenz
CSS-Eigenschaft „opacity“
Mit der CSS-Eigenschaft „opacity“ können HTML-Elemente transparent dargestellt werden. Dabei können Werte zwischen 1 (nicht transparent) und 0 (komplett transparent) verwendet werden:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i64a95c3b449cfcdb/version/1487674561/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ieefa05bf19030e3f/version/1487674580/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i0b1bda4da2b37c69/version/1487674600/image.png)
Ein praktischer Anwendungsfall für Transparenz sind z. B. Links. Hier kann ein Bild-Link mit der Pseudoklasse „:hover“ transparent dargestellt werden, sobald der Mauszeiger darüber bewegt wird:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i720cc4b380e12f81/version/1487674645/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i1676b2fe9212ed3b/version/1487674664/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i8ba88b51cabe8954/version/1487674707/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i4c714882da5d5300/version/1487674806/image.png)
Mit der CSS-Eigenschaft „opacity“ werden bei einem HTML-Element alle Bestandteile des Boxmodels, d. h. der Inhalt (Hintergrundfarbe und Schriftfarbe), sowie der Rahmen und die Umrandung, gleichermaßen beeinflusst:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ieb450bd71d94f4f2/version/1487679520/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i0fb2d97cc5b2c969/version/1487679541/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i4ab251baaaafd40f/version/1487679569/image.png)
Transparenz mit RGBA
Soll nur eine bestimmte Farbeigenschaft transparent dargestellt werden, können anstelle der Eigenschaft „opacity“ RGBA-Werte verwendet werden. Hier kann als vierter Wert die Transparenz angegeben werden:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/idc9d13253827ac46/version/1487679625/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ic367e07912dbb769/version/1487679641/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i9112597148b533c5/version/1487679661/image.png)
Abschlussübung
Als Abschlussübung kannst du folgendes Beispiel nachbauen, das eine transparente Textbox über einem Bild verwendet:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i8ceb42351922b316/version/1487802708/image.png)
Gehe dabei folgendermaßen vor:
- Verwende zwei verschachtelte Container-Elemente („div“)
- Gebe dem ersten „div“-Element das Hintergrundbild („background-image“) „Background-Water.png“ (siehe Download weiter unten)
- Gebe dem zweiten „div“-Element einen weißen transparenten Hintergrund:
„background-color: rgba(255,255,255,0.5);“ - Für den eigentlichen Text kannst du ein Absatz-Element („p“) verwenden
- Gebe beiden Containern noch einen ansprechenden Rahmen
Die Lösung kannst du dir hier herunterladen: