css - 互联网浏览器 : semi-transparent images

Question

我有下面两张图片。

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

它们的设置如下:

<div id="header"><a></a></div>原始图像作为 div 的背景，“发光”图像作为 anchor 标记的背景，display:block; width: 100%; height: 100%;opacity: 0;

我正在使用下面的 jquery 代码

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

在悬停时使 anchor 图像淡入淡出。

这在 firefox、chrome 等中工作正常。但是在 Internet Explorer 中，图像被赋予了透明的纯黑色背景。

我该如何解决这个问题？

注意:我只担心 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 过滤器时清除现有过滤器。