IE8，透明PNG和过滤器：alpha

Posted 2023-03-06

【中文标题】IE8，透明PNG和过滤器：alpha

【英文标题】：IE8, transparent PNG and filter:alpha

【发布时间】：2011-06-15 09:49:07

【问题描述】：

我会切入正题。这是输出：

（现在是一些可选代码 - 仅在您真正需要时阅读；））

这是标记：

<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 可以做什么？

【问题讨论】：

IE8 可以被摧毁和活埋，再也看不到了。很抱歉，这可能不是您要找的答案。 :)

我完全同意：D。我和你一样讨厌它，相信我：P

【参考方案1】：

在您的 :hover 类中使用 filter:none。

【参考方案2】：

一个简单的解决方法：只需为 .logo_hover:hover 添加背景颜色，alpha 过滤器就会再次正常工作。

显然，此修复程序并不总是有用（也就是说，如果您无法在 png 下方使用模拟真实背景的背景颜色）。

【讨论】：

背景颜色为我解决了这个问题，我从来没有想过 :) 感谢您的提示

【参考方案3】：

这对我有用：

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

感谢 SLaks！！

【参考方案4】：

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

【讨论】：

我正在尝试这样做，但 IE 似乎完全忽略了这一点。这是我的声明：filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png', sizingMethod='scale')alpha(opacity=100); - 结果和之前的 x_x 完全一样……我做错了吗？

嗯，其实更糟糕的是：使用它根本不会显示任何图像。我这里有点疑惑……

@mingos：是的；您需要使用, 分隔过滤器。

好的，谢谢。我太困了，现在无法尝试，但我明天晚上会回到这个:)。

不幸的是，这根本不起作用。图像根本没有出现:(。