5

CSS 代码：

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

JavaScript/jQuery：

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

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

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

解决办法是什么？

4

10 回答 10

11

对我来说，它可以在 jQuery 的 .animate() 函数中包含具有空白值的过滤器属性

也许这也对你有用。

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

此外，您可能必须从按钮的 CSS 中删除 filter 属性。

于 2010-11-21T11:29:40.170 回答
7

filter:''hack 不再适用于当前的 jQuery (1.6.1)

于 2011-06-22T09:35:09.220 回答
5

我知道目前没有解决方案。只需要等待IE赶上世界其他地方。就在几天前，我不得不在最近的一个项目中放弃这样的功能。不幸的是，您不能使用 jQuery 淡入淡出 IE 的羽化边缘 PNG。

于 2010-03-04T03:40:35.123 回答
4

嘿，看来桑普森可能错了。请参阅 Dave Shea 的帖子： http: //mezzoblue.com/archives/2010/05/20/ie8_still_fa/

我只是在这里转储解决方案的三段：

当然，目前还没有 IE 版本支持 CSS opacity 属性，因此 jQuery 通过利用 IE 专有的 AlphaImageLoader过滤器来应用 opacity。这最终成为（看似众所周知的）错误的根本原因。建议的解决方法是改为将透明度应用于父元素，但该解决方法收效甚微。

起作用的是一个名为DD_belatedPNG的小库，它通过 VML 而不是 AlphaImageLoader. 它是为 IE6 设计的，但在 IE7 中也能正常工作。对于 IE8，我被迫放弃了X-UA-Compatible meta标记，并将 IE8 降级到 IE7 模式以用于此特定页面。

它仍然不完美。我注意到一个微弱的白色边界框在较低的不透明度下突出，这迫使我稍微调整所有版本的 IE 的悬停效果。但你知道，尽管如此，它已经足够好了。

嗯……奇怪的是，当这个问题在 6 个月前被问到时，这个解决方案没有出现。当然，这篇博文并不存在，但解决方案已经存在了很长一段时间。奇怪的是没有人注意到它...

于 2010-08-31T10:07:50.530 回答
2

为现代浏览器（mozilla、Opera、Chrome 等）使用 PNG 图像：

background:url(../images/banner01.png) no-repeat right 13px;

为 IE 添加这个（使用另一个 CSS 或使用 IE hack）

/* ie fix */
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/banner01.png",
 sizingMethod="crop");
于 2011-09-13T19:00:34.750 回答
2

我认为这里有一个真正的解决方案：http: //www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/

就我而言，它解决了具有透明背景的动画 png 图像上令人敬畏的黑色背景。它就像一个魅力。在 ie7+ 上测试我暂时无法测试 ie6。

希望它对每个人都有帮助:) Julien

于 2011-08-03T14:39:01.823 回答
1

有趣的说明：jQueryTOOLS 在所有 IE 版本中都使用 GIF 作为工具提示的错误修复。 演示

于 2010-08-31T09:57:30.913 回答
0

这是修复！更新到最新的 jQuery。而已。之后它就起作用了。

于 2012-11-11T11:20:55.770 回答
0

据说有一个库可以解决这个问题：jCSML。我已经尝试过了，它可以在 IE 7+ 中为透明 png 设置动画。

于 2012-05-24T19:32:06.013 回答
0

感谢 Julien 的回答，它引导我朝着正确的方向前进！

但是，在图像不透明度过渡期间，文本周围仍然出现灰色光晕。它静止时看起来很好，但它仍然会产生一个奇怪的轻微灰色光晕（IE 8）。我通过更改为以下值来修复它。

此外，我不得不单独声明“缩放：1”属性，因为 IE 8 只是将该值粉碎到background属性的末尾。同样的事情与background-color: transparent; IE 很烂。

我的工作CSS：

.classOfParentElement img {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF)"; /* IE 8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF); /* IE 6 & 7 */
}

.classOfParentElement img {
    -ms-zoom: 1;
    zoom: 1;
    background-color: transparent;
}

请注意，我必须更改endColorstr=#00FFFFFF为endColorstr=#FFFFFFFF.

重申 Julien，这个解决方案来自 Viget.com。

于 2014-03-19T19:06:02.040 回答