0

我一直在观察，在具有透明度的 PNG 上使用 jQuery 的 fadeIn() 函数时，在动画期间，IE7/8 中的透明度被禁用。我的研究表明，这是因为只有一个“过滤器”可以在给定元素上处于活动状态，并且透明度和不透明度都被视为过滤器。

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

4

1 回答 1

0

我经常听到的一个修复方法（虽然我自己从未尝试过）是淡化包含 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）

于 2012-11-29T20:13:33.030 回答