IE8，透明PNG和过滤器：alpha

Question

我会切入正确的观点。这是输出：

（现在是一些可选代码 - 只有在您真正想要时才读取;）

这是标记：

<a href="/" id="logo_wrapper">
    <span class="logo logo_normal"></span>
    <span class="logo logo_hover"></span>
</a>

这是CSS（仅限于相关内容，为了您的阅读乐趣）：

#logo_wrapper {
  position:relative;
}
#logo_wrapper .logo {
  display:block;
  width:260px;
  height:80px;
  background-image:url(logo.png);
  position:absolute;
}
#logo_wrapper .logo_normal {
  background-position:0 0;
}
#logo_wrapper .logo_normal:hover {
  opacity:0;
  filter:alpha(opacity=0);
}
#logo_wrapper .logo_hover {
  background-position:0 -80px;
  opacity:0;
  filter:alpha(opacity=0);
}
#logo_wrapper .logo_hover:hover {
  opacity:1;
  filter:alpha(opacity=100); /* THIS IS THE OFFENDER! */
}

只是为了澄清一下：我知道我可以使用单个span，只需在悬停时切换徽标的background-position，但完整的CSS为真正的浏览器提供了可爱的CSS3过渡功能。我应该上下滚动徽标。

好的，所以，这是一个32位色深的PNG，当然还有透明度。当我完全不使用alpha过滤器或filter:alpha(opacity=0)时，IE8中的一切都很好。但是，如果将不透明度设置为100，仅仅使用滤镜会导致IE8变得疯狂并使所有不完全透明的像素100％不透明。并不是说这个特殊的图像在这种效果下看起来很糟糕，但它仍然很烦人：D。

现在，我很清楚IE8因透明的PNG问题而臭名昭着，其中的问题可以追溯到IE6以及透明区域的可怕的纯青色填充。可以用一些IE行为黑魔法来解决这个问题。

关于IE8可以做些什么？

Answer 1

一个简单的修复：只需为.logo_hover添加背景颜色：悬停，alpha过滤器再次正常工作。

显然这个修复并不总是有用的（也就是说，如果你不能在你的png下面使用模仿真实背景的背景颜色）。

Answer 2

您需要使用AlphaImageLoader过滤器，就像IE6一样。

Answer 3

这对我有用：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png', sizingMethod='scale', alpha(opacity=100));

谢谢SLaks !!

Answer 4

在filter:none课程中使用:hover。