CSS-Plus
CSS-Plus
Play with web technologies

IE opacity with CSS

April 12, 2010
Attention: This article is old and the content is outdated. I've left the article here for historical purposes.
IE opacity with CSS

Achieving Internet Explorer (IE) opacity is a bit of an annoyance, no matter how you would like to achieve it. The most common way of doing this is to set a .png file as the background of an HTML element. Unfortunately IE 6 doesn't support .png files without adding javascript to the page to enable .png opacity. It is beneficial to avoid using these files because it unnecessarily adds to the HTML requests.

Work around

There is a fairly simple work-around to this problem. Other browsers (Chrome, Firefox, Opera, Safari) support the rgba CSS3 property, which makes backgrounds with alpha transparency ridiculously easy to implement. There is a similar IE opacity CSS property which has been around since IE 5.5. Unfortunately this solution looks absolutely horrible, and it doesn't pass CSS validation. Validation can still be achieved if this property is added to a [if lte IE 8] stylesheet. I've written an article about browser detection and why you should use [if lte IE 8] instead of [if IE].

The IE opacity / alpha transparency CSS properties look like this:

#example {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#7F516764,endColorStr=#7F516764);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F516764,endColorstr=#7F516764)";
    zoom: 1;
}

As you can see, the filter and the -ms-filter properties are almost identical. IE 8 decided to start using the vendor prefix (Like the other versions should have done from the beginning). The startColorStr and the endColorStr contain the same values in this example because we do not want a gradient. A gradient could be achieved with these IE CSS properties as easily as a normal colour could be implemented. The first two characters are the alpha transparency hex values, and the last 6 are the colour's hex value. It is a bit of an annoying process to calculate the alpha transparency hex value, but here is how it is done.

How would I achieve background: rgba(0, 0, 0, 0.5) in IE?

Here is a quick tutorial on what you would do if you wanted a black background with a 50% alpha transparency value. First multiply 255 by that 0.5 So 255 * 0.5 = 127.5 Round that up or down. I rounded it off to 127. Now go to a website that converts decimal to hexadecimal. (It should be 7f if you used 127) The value you would use for the startColorStr and the endColorStr would be #7f000000.

#example {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#7f000000,endColorStr=#7f000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000)";
    zoom: 1;
}

This doesn't look or feel very semantic, but hey, it gets the IE opacity job done and the browser isn't very semantic anyway. Luckily we won't have to deal with any of these IE opacity annoyances in IE 9 since it is going to support CSS3.

Demo