Tuesday, December 6, 2011

Fixing IE PNG opacity

So you've got a sweet jQuery-based animation working in Firefox and Chrome and all that, and you check in IE, and, in horror, you find that the opacity animations on PNG background images are showing this ugly black halo. What to do?

Easiest fix:

//say this is your initial style
.thing {
background:url(images/translucent.png) no-repeat;
filter:alpha(opacity=50);
opacity:0.5;
}

//add this to the stylesheet
.thing {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=/path/to/images/translucent.png) alpha(opacity=50);
background:none\9;
}

(I wrapped the one line to fit in the blog, but the filter declaration should be all in one line)

Just make sure you use an absolute image path on the filter, not a relative one. Tweak the opacity to your liking.

When animating, jQuery is smart enough to not clobber the AlphaImageLoader filter when it changes the opacity one.

3 comments:

  1. Thanks for sharing such valuable information.Keep posting such great info for us thanks

    ReplyDelete
  2. Sweet! This issue has been my bane for the last few days :)

    ReplyDelete
  3. Only solution that actually WORKED!! Thank you!!

    ReplyDelete