互联网浏览器：半透明图像

Question

我有下面两张图片。

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

它们的设置如下：

原始图像作为 div 的背景，“发光”图像作为锚标记的背景，使用 display:block;宽度：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

---

Update
I have decided that this is simply not worth my time to do in 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。但你知道，
尽管如此，这真是太好了
够了。