在 Windows XP 上使用 IE8 无法正确显示的背景图像 .png

Question

我使用带有“冰云”图像的背景，我确实会消失，然后使用 jQuery 并使用 .fadeTo() 函数重新出现。由于背景图片是 .png，如果您在 SO Windows xp 上使用 IE8，我会看到背景图片好像有边框黑色/灰色，透明不完美，而如果您使用其他浏览器，“冰云”是正常的。我想知道是否有一些插件 jQuery 或 css 过滤器可以解决 IE8 上的这种透明不兼容问题。

html:

<div class="ice"></div>

css:

#main #slogan #iphone .ice {
    position:absolute;
    top:20px;
    right:22px;
    display:block;
    width:450px;
    height:486px;
    background:transparent url(../images/system/main-animation-ice.png) no-repeat 0 0;
    z-index:1;
}

javascript：

$(o).delay(i*'1200').fadeTo(2000,1.0).fadeTo(2000,0.2);

左边是正常效果，右边是IE8的bug。

Answer 1

您可以使用 IE 的专有过滤系统在 CSS 中完成。

 #main #slogan #iphone .ice {
     position:absolute;
     top:20px;
     right:22px;
     display:block;
     width:450px;
     height:486px;
     background:url(../images/blank.gif), transparent url(../images/system/main-animation-ice.png) no-repeat 0 0;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='../images/system/main-animation-ice.png');
     z-index:1;
 }

您需要为背景声明中的“第一张”图片使用空白.gif。这只是为了混淆ie8，阻止它同时使用你设置的滤镜和背景，只使用滤镜。其他浏览器支持多个背景图片，并且会理解背景声明而不理解过滤器，因此只使用背景。

您可能还需要在过滤器中使用sizingMethod 以使其按您想要的方式工作。

更新

我在 ie8 中查看了您的网站，您在这里遇到的问题比您在本文中提到的要多。

首先，您没有包含background : none 的覆盖，因此 ie8 现在为您提供了过滤器版本和损坏的背景版本。

其次，您不只是将其用作背景图像，而是将其用作精灵。您不能将精灵与 alpha 图像加载器一起使用；因为没有背景位置属性。因此，您需要将其分成 3 张图像并在滤镜中在它们之间切换，而不是使用背景位置进行切换。

第三部动画表现很糟糕。您要求 ie8 同时改变 6 个透明图像的不透明度。即使使用 alphaImageLoader，这也会导致某人的浏览器崩溃。

我的建议。对于ie8$('.ice').hide();

但是，这种在 ie8 中修复 png 的方法确实有效 http://jsfiddle.net/ZSYbU/2/

Answer 2

我认为在 IE 8 中没有办法避免这种不透明动画问题。我也遇到过，但从未找到解决方案。如果有的话，我很想学。