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 并只需切换徽标的 悬停时的背景位置，但完整的 CSS 具有可爱的 CSS3 过渡，适用于不应该上下滚动徽标的真实浏览器。

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

现在，我很清楚 IE8 因透明 PNG 问题而臭名昭著，这些问题可以追溯到 IE6 及其透明区域的丑陋的纯青色填充。这个问题可以通过一些 IE 行为黑魔法来修复。

IE8可以做什么？

Answer 1

一个简单的修复：只需向 .logo_hover: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

在 :hover 类中使用 filter:none 。