Internet Explorer上的透明PNG动画问题

问题描述：

CSS代码：

#btn{
  background: url(transparent.png) no-repeat;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

JavaScript / jQuery：

JavaScript/jQuery:

$("#btn").animate({opacity:1,"margin-left":"-25px"});

我对Firefox，Chrome等上面的代码没有任何问题。但它不适用于任何版本的Internet Explorer。

I don't have any problem with the code above on Firefox, Chrome and others. But it does not work on any version of Internet Explorer.

问题是PNG图像呈现奇怪，透明PNG的背景看起来很黑。当我删除不透明效果时，没有问题。

The problem is the PNG image is rendered strange, background of the transparent PNG looks black. When I remove opacity effect, there is no problem.

解决方案是什么？

答

目前我还没有解决这方面的问题。只需要等待IE赶上世界其他地方。几天前我不得不在最近的一个项目中放弃这样的功能。遗憾的是，你无法使用带有IE淡入淡出和淡出jQuery的羽毛边缘PNG。

There is currently no solution for this that I'm aware of. Just have to wait for IE to catch up with the rest of the world. I had to abandon such a feature in a recent project just days ago. You unfortunately cannot have a feathered-edge PNG with IE fading in and out with jQuery.

Internet Explorer上的透明PNG动画问题

相关推荐