IE opacity with CSS

Achieving 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.

Any questions or comments?

  1. Rollins says:

    Excellent.. really amazing Stuff here. Thanks

  2. Dominic says:

    Hey,

    I’m having trouble. I have a site (above) and have applied the IE fix to two elements. The first one works, the second doesn’t. Anyone got any clues?

    Cheers!

  3. K says:

    Thank you so much for writing this! It solved my problem :) 2013 and still developing pages for IE6/IE7/IE8, damn it 😉