CSS background opacity with rgba not working in IE 8

Question

I am using this CSS for background opacity of a <div>:

background: rgba(255, 255, 255, 0.3); 

It’s working fine in Firefox, but not in IE 8. How do I make it work?

Answer 1

To simulate RGBA and HSLA background in IE, you can use a gradient filter, with the same start and end color (alpha channel is the first pair in the value of HEX)

background: rgba(255, 255, 255, 0.3); /* browsers */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */ 

Answer 2

Create a png which is larger than 1x1 pixel (thanks thirtydot), and which matches the transparency of your background.

EDIT : to fall back for IE6+ support, you can specify bkgd chunk for the png, this is a color which will replace the true alpha transparency if it is not supported. You can fix it with gimp eg.