Posted by & filed under Web Development.

We have found that opacity settings have some weird characteristics we have not completely gotten a handle on (or at least I haven’t gotten a handle on :-) ) involving inheritance of child elements. In short, setting opacity to 1 does not undo an opacity setting set by a parent element. When it comes to making entire backgrounds slightly transparent, say, creating some sort of transparent screen, one way around this is using the CSS background-color: rgba property.

We have found that opacity settings have some weird characteristics we have not completely gotten a handle on (or at least I haven’t gotten a handle on :-) ) involving inheritance of child elements. In short, setting opacity to 1 does not undo an opacity setting set by a parent element. When it comes to making entire backgrounds slightly transparent, say, creating some sort of transparent screen, one way around this is using the CSS background-color: rgba property.

The problem is that rgba is not supported by Internet Explorer, even in version 8. However, there is a weird obscure IE-only property that you can set that will accomplish the same thing. This property will be ignored by non IE browsers:

#myscreen {
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddc3bfbf,endColorstr=#ddc3bfbf);
     zoom:1;
     background-color: rgba(174,174,172,.9);
}

The first two lines here are the IE-only properties. I don’t really understand why zoom:1 is needed, just include it :-? . You’ll notice that the start and end color strings eight characters long rather than the usual six. The first two are for the alpha channel/transparency, the remaining six are the color. The alpha channel can be anything from 00 (fully opaque) to ff (fully transparent), or any of the 16 characters starting at 0-9 and continuing on with a-f. To reproduce an opacity setting of 0.5, this would be half of 16 which is 8, or characters 99. We haven’t really played around with using different digits such as 91 or a6, but using two matching digits should get you pretty close to the opacity setting which matches your rgba value. The rgba properties are, of course, R-G-B-opacity, or in this case, red: 174, green: 174, blue: 172, opacity: 0.9.

The IE workaround is definitely downright goofy, but it works. This is fully documented here. We don’t use the conditional statements documented on this page out of laziness, but they might be a good idea, although not vital.