From Birnam Designs Wiki

When laying out a webpage, I will use either Firefox or Chrome for my initial development, and then test with IE and other browsers for compatibility. During the Firefox/Chrome development, I am free to use rgba CSS color syntax, like this:

.box {
    background: rgba(180, 180, 180, 0.8);
}

This is great, and I can't wait until IE9 implements this (hopefully). Yup, that's right, none of the existing IE versions support this. It's in the CSS3 spec though, so hopefully IE9 will follow.

So when it comes time to make things cross-browser (read: IE) compatible, this needs to be replaced by an image. Fortunately, this is really easy to make, and you don't have to wait 20-30 seconds for Photoshop to open. You just need ImageMagick installed.

convert -size 10x10 xc:transparent -fill 'rgba(180, 180, 180, 0.8)' -draw 'rectangle 0,0 10,10' bgbox.png

The command should be pretty self explanatory. Start with a 10x10 image, use a transparent background, set the fill style to the same RGBA value you had originally in the CSS, and then draw a 10x10 rectangle at the origin. Just remember to quote the long parameter values. Now you just need to update your css:

.box {
    background: url(bgbox.png) 0 0 repeat;
}