Skip to content

CSS Hintergrund ohne Beeinflussung der Kindelemente mit Hilfe von RGBa und Filtern

Eine weit verbreitete Methode zur Erstellung transparenter Inhalte mit der Hilfe von CSS ist die folgende:

filter:alpha(opacity=80); /* IE */
 opacity:0.8; /* allgemein */
 -moz-opacity:0.8; /* Mozilla */
 -khtml-opacity:0.8; /* KTHML */
 -opera-opacity:0.8; /* Opera */

durch dieses Verfahren werden allerdings ebenfalls die Kindelemente des jeweiligen Bereiches betroffen.

Die Lösung habe ich im Blog von Robert Nyman gefunden:
Original Artikel auf Englisch  

/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
 background: rgba(0, 0, 0, 0.6);
 /* For IE 5.5 - 7*/
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
 /* For IE 8*/
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *