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.


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

Initial Language