1

我使用带有“冰云”图像的背景，我确实会消失，然后使用 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。

在此处输入图像描述

4

2 回答 2

2

您可以使用 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/

于 2012-08-06T20:59:49.613 回答
0

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

于 2012-08-06T20:57:33.360 回答