internet explorer：半透明图像

Question

我有两张图片。

它们是相同的图像，其中一个图像对文本有轻微的发光效果。

它们的设置如下：

<div id="header"><a></a></div> 原始图像是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等中运行良好。 但是在互联网浏览器中，图像被赋予了坚实的黑色背景，其中有透明度。

我该如何解决这个问题？

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

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

<小时/> 的更新
我已经决定在Internet Explorer中这不值得我花时间去做。

然而，这在ie9中完美无缺，所以我猜不会为浏览器删除此效果，而不是ie9。

Answer 1

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

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

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

否则，jQUery会在添加alpha过滤器时清除现有过滤器。

Answer 2

Dave Shea mezzoblue.com的这篇文章可以帮助你：http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/

它注意到他尝试的所有方法，以及他最后到达的最终解决方案：

  

什么工作是一个小图书馆   名为DD_belatedPNG，适用于PNG   通过VML而不是透明度   AlphaImageLoader的。它的设计目的   IE6，但它在IE7中工作得很好   好。对于IE8，我被迫抛出   输出X-UA-Compatible元标记和   步骤IE8降至IE7模式   特别页面。

最后有一个小小的警告

  

它仍然不完美。我注意到了   微弱的白色边框戳戳   通过强迫的较低的不透明度   我稍微调整悬停效果   适用于所有版本的IE。但是你知道，   尽管如此，它还是非常好的   够了。