Question

I know this topic has been addressed several times here, however my problem is different (or possibly I missed it somewhere?).

My issue is that I need a cross browser way to set opacity and have it not show a black background on the transparent pngs (IE7 and 8).

Several here suggested:

$(this).fadeTo(0, 0.5);

however like I said above.. it displays black on the png.

Thanks.

Answer 1

I don’t think this has anything to do with fadeTo, which is about the overall opacity of an element. Basically, what you have to do is get IE to understand the alpha channel of PNGs at all so it understands the bits that should be transparent, which requires some IE-specific CSS:

img {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

Details (just a couple of links; but if you search for “IE” “png” “transparency” you’ll find a huge amount of information):

• MS KB#294714
• Transparent PNGs in IE6 (applies to later versions as well)