3

我有下面的两张图片。

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

它们的设置如下：

<div id="header"><a></a></div> 原始图像是 div 的背景，“发光”图像是锚标签的背景，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 的浏览器会删除这种效果。

4

2 回答 2

2

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

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

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

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

于 2010-08-24T00:57:52.827 回答
0

来自 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 的悬停效果。但你知道，尽管如此，它已经足够好了。

于 2010-08-24T11:58:02.023 回答