Internet Explorer：半透明图像

Question

我有下面两张图片。

它们是同一张图片，只是其中一张文字带有轻微的发光效果。

它们的设置如下：

原始图片是 div 的背景，'glow' 图片是锚点标签的背景，使用 display:block; width: 100%; height: 100%;opacity: 0; 属性。

我正在使用以下 jQuery 代码。

$('#header a').hover(
  function() {$(this).animate({"opacity":"1"}, 1000);},
  function() {$(this).animate({"opacity":"0"}, 1000);});

在悬停时淡入淡出锚点图像。

这在Firefox、Chrome等浏览器中运行良好。 但在Internet Explorer中，图像会被赋予实心黑色背景，其中有透明度。

我该如何解决这个问题？

注意：我只担心ie7 / 8而不是6。

http://webspirited.com/header-reachsniper.png http://webspirited.com/header-reachsniper-hover.png

---

更新
我已经决定在Internet Explorer中不再花费时间来完成此操作。

然而，在ie9中，这个效果完美地工作，所以我想我会删除那些低于ie9的浏览器的效果。

- Hailwood

Answer 1

为了设置透明PNG图像的不透明度，您需要使用AlphaImageLoader过滤器，即使在IE8中也是如此。

编辑：您还需要在CSS中添加alpha过滤器，如下所示：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path", sizingMethod="scale"),alpha(opacity=100);

否则，当jQuery添加 alpha 过滤器时，它会清除现有的过滤器。

- SLaks

---

使用alphaImageLoader加载图像时，“hover”图像会在页面加载时显示，然后当您将鼠标悬停在链接上时，它会消失，直到您刷新页面。我该如何解决这个问题？ - Hailwood

@Hailwood：我忘了提到你还需要在CSS中显式添加“alpha”过滤器。 - SLaks

Answer 2

这篇来自Dave Shea的mezzoblue.com文章或许能帮到你：http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/

他在文章中列举了所有尝试过的方法，以及最终解决方案：

真正奏效的是一个名为DD_belatedPNG的小型库，它通过VML而非AlphaImageLoader应用PNG透明度。它是为IE6设计的，但在IE7上也可以正常工作。对于IE8，我不得不放弃一个X-UA-Compatible元标签，并将IE8降级到IE7模式，以便在这个特定页面上使用。

最后还有一个小小的注意事项。

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

- Yi Jiang