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

【问题标题】：Using jQuery to Fade in Transparent PNGs in IE7/8在 IE7/8 中使用 jQuery 淡入透明 PNG
【发布时间】：2012-11-17 23:46:32
【问题描述】：

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

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

【问题讨论】：

标签： jquery internet-explorer-8 internet-explorer-7 png opacity

【解决方案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）

【讨论】：

我曾尝试将图像放入包装 div 中。 IE8 实际上只是突然显示图像而没有过渡，我想这还好，但 IE7 仍然有一些奇怪的伪影。我没有使用背景图像方法取得任何成功。使用 png8 会做什么？
png-8 的图像编码器与 png-24 不同。 IE 在解码 png-8 图像的透明度方面一直做得更好。 png-8 最多只支持 256 种颜色（如 GIF 图像），而 png-24 图像支持数百万种颜色。因此，如果您没有损失任何质量（或者如果您的图像是可以接受的），您可以尝试使用 png-8 而不是 24。
我不认为 png-8 会起作用，因为我们有很多重叠的图像，而且质量不太好。我可能只是写一些新的淡入淡出函数来做一些浏览器检测，对于 IE7/8，它调用 show() 而不是 fadeIn()。
也许这是最好的方法 :) 你甚至不必编写自己的函数：因为你使用的是 jQuery，你可以使用 "$.browser.msie;" （如果 IE 则返回 true）和 jQuery.browser.version。在这里解释：api.jquery.com/jQuery.browser
您没有尝试过的修复 - “在图像周围添加一个包装 div...并淡化那个” - 它修复了不需要的黑色背景，但是你失去了淡入/淡出效果......但是我认为没有黑色看起来仍然更好。