von Thomas Salvador.
In "Tabellen mit halbtransparentem Hintergrund" wurde gezeigt, wie man in HTML Tabellen erzeugt, dass der Hintergrund halbtransparent ist. Hierbei scheint das Hintergrundbild der Seite durch und wird farblich getönt. Dies ist in HTML so direkt nicht möglich und erforderte einen Trick.
Der Trick nutzte dabei spezielle Bilder, um den Effekt zu erzeugen.
Heutzutage ist das einfacher. Zwar geht es mit HTML selbst immer noch nicht, jedoch ist es mit CSS kein Problem. Der Vorteil an dieser CSS-Version ist, dass es kein Trick ist, wo Fähigkeiten genutzt werden, um etwas zu simulieren. Auch macht die CSS-Version keine Annahmen zu dargestelltem Inhalt oder Betrachter.
Nein, es ist eine reguläre Formatierung, die allerdings noch nicht von allen Browsern unterstützt wird.
Transparenz gibt es in CSS schon länger und wird dort mit dem Attribut opacity gesetzt. Das Problem ist jedoch, dass es das Objekt als Einheit erfasst und entsprechend durchsichtig macht.
<html> <head> <title>Banner-Beispiel</title> <style type="text/css"> div.fore {background:blue;opacity:0.5;} </style> </head> <body background="https://brauchbar.de/images/bb-logo3.gif"> <div class="fore"> <b>Beispiel</b> </div> </body> </html>
Das sieht so aus:
Sie sehen, dass es sich tönend über das Bild legt, der Text jedoch auch durchsichtig ist.
In neuerem CSS wird die bisherige Funktion rgb() zum Setzen von Farben ergänzt um rgba(), welches einen weiteren Wert nimmt, der alpha genannt wird und die Transparenz regelt.
Der Unterschied liegt nun darin, dass rgba() nicht das ganze Element erfasst und den Inhalt unverändert lässt.
<html> <head> <title>Banner-Beispiel</title> <style type="text/css"> div.fore {background:rgba(0,0,255,0.5);color:black;} </style> </head> <body background="https://brauchbar.de/images/bb-logo3.gif"> <div class="fore"> <b>Beispiel</b> </div> </body> </html>
Das sieht so aus:
Sie sehen, dass der Container-Hintergrund das Bild tönt. Der Text ist jedoch kräftig schwarz.