Return to Snippet

Revision: 28758
at July 14, 2010 03:00 by chrisdpratt


Initial Code
#box {
    color: #000;
    
    /* For IE */
    background:transparent; zoom:1;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000); /* IE 5.5 - IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)"; /* IE 8 */
}

#box:not(.IE) {
    background: #000; /* Fallback for browsers that don't support RGBa */
    background: rgba(0,0,0,0.5);
}

Initial URL


Initial Description
This CSS sets semi-transparent background while not affecting the opacity of child elements like using the opacity property would. The text color has been set to the same as the background color to demonstrate this.

Notes:

For the Microsoft filters, color values are in hex with the first two digits specifying the alpha transparency. In this case, that's '80', equivalent to 0.5.

:not(.IE) is added to exclude IE; no current version of IE understands the :not selector. '.IE' can be any valid classname that is NOT used anywhere else.

Initial Title
Cross Browser Background Opacity

Initial Tags
background

Initial Language
CSS