Question

我一直在观察当在具有透明度的PNG上使用jQuery的fadeIn（）函数时，在动画期间IE7 / 8中禁用透明度。我的研究表明，这是因为在给定元素上只有一个“滤波器”可以激活，透明度和不透明度都被认为是滤波器。

我已经在SO和其他地方看到了一些假设的解决方案，但我没有取得任何成功。我尝试过将图像包装在另一个元素中并淡化该元素的事情。我试过让图像成为背景图像。是否有任何经过测试/确认的解决方案或最佳实践来解决此问题？我想我可以做一些浏览器嗅探并使用show（）而不是IE，但我想尽可能让淡入淡出工作。

Answer 1

我听过很多关于（自己从未尝试过）的修复方法是淡化持有png图像的父容器。只需在图像周围添加一个带有id（或类）的包装div，然后淡化该图像。

<div id="wrapper">
  <img src="image.png" />
</div>

如果不能解决问题，你可以尝试将图像设置为透明背景图像并淡化包装：

<div id="wrapper">
  <div id="image">
  </div>
</div>


#image
{
  width:100%;
  height:100%;
  background:transparent url('image.png') no-repeat;

  /* css For IE background image*/
  background:none\9;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
}

注意：IE的背景后面的“\ 9”仅适用于IE8或以下

尝试一下，如果仍然无效，请尝试将png渲染为png8（而不是png24）

在IE7 / 8中使用jQuery淡入透明PNG

1 个答案: