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.
