做有态度的前端团队

网易FEG前端团队

PNG半透明图片淡入淡出切换效果在低版本IE下的BUG

问题描述:

PNG半透明图片淡入淡出切换的时候在IE7、IE8会有问题,图片周围会出现黑块

图片淡入淡出切换是很常见的交互,用户体验也比直接显示隐藏,没有过渡要好。但在用PNG半透明图片做的时候,问题来了,我们会在低版本IE下看到PNG图片周围会出现黑块,非常难看。第一次遇到这个问题是,去年做的一个嵌入到“网易游戏助手”应用程序的一个轮播图,需求方甚至要求兼容IE6。我们知道,IE6是完全不支持PNG的,这次项目用到的就是PNG图片,最初以为只要兼容IE6,使它支持PNG透明就没啥事了,很简单。后面做交互的时候,就碰壁了,就是前面说的黑块。今天特意去看看线上项目相似的案例,发现也有存在这个问题的。

比如大唐无双官网这里,正常情况下是这样的:

qt.jpg

在IE7、8下可以看到图片周边出现明显的黑块

ie.jpg

解决方案

到底是什么原因导致的呢?我们这个淡入淡出的效果是通过改变opacity的值实现的,而IE8及更早版本不支持,它改变透明度,不是通过css属性,而是通过filter滤镜,所以想要理解这个bug,就要从filter滤镜上找原因。更具体的原因也说不清,下面我就说说解决方案:

1、使用filter滤镜,网友普遍推荐的一种方法:

    background-image:url(******.png) !important;
    background-image:url(../images/space.gif);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="******.png", enabled=true, sizingMethod=scale);

我之前项目用的也是这个方法,图片不使用img标签,而是写在background里,然后使用filter滤镜,的确有效,IE6-8淡入淡出效果没问题,详情请戳 。不过今天测试的时候发现有点问题。这个必须不带文档声明才有效,比如加上<!DOCTYPE html>就是不行,有点诡异。这个方法不推荐使用。

2、第二种方法和第一种方法差不多,也是使用filter滤镜,亲测有效,暂时没发现什么问题。

    background:url(img/***.png);
    background:none\0;*background:none;
    filter:progid:dximagetransform.microsoft.alphaimageloader(src="img/***.png", sizingmethod="crop");

3、低版本IE和其它浏览器分开处理

    if (navigator.appName == "Microsoft Internet Explorer" && (navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0" || navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0")) {
        //do something
    } else {
        //do something
    }

filter滤镜坑毕竟比较多,还是慎用吧,推荐使用这样的做法,不需要折腾那么多。JS做个判断,低版本IE下,就让它直接显示隐藏就好了,不淡入淡出,像我们很多项目一样,CSS3动画并不需要低版本IE支持,能够正常展示即可。

4、借助CSS3的transition属性

css代码如下:

div {
    position:absolute;
    left:0;
    top: 0; 
    opacity: 0;
    visibility: hidden;
    -webkit-transition:all .5s linear;
    -moz-transition:all .5s linear;
    -ms-transition:all .5s linear;
    -o-transition:all .5s linear;
    transition:all .5s linear;
}
div.cur{
    opacity: 1;
    visibility: visible;
    -webkit-transition:all .5s linear;
    -moz-transition:all .5s linear;
    -ms-transition:all .5s linear;
    -o-transition:all .5s linear;
    transition:all .5s linear;
}

html代码如下:

<div class="cur"><img src="img/1.png"></div>
<div><img src="img/2.png"></div>
<div><img src="img/3.png"></div>

js代码如下:

      var index = 0,
          timer = null,
          len = $("div").length;

       function autoplay() {
        timer = setInterval(function() {
            index++;
            if (index > len - 1) {
                index = 0;
            }
            $('div').removeClass('cur').eq(index).addClass('cur');

        }, 2500)
       }
       autoplay();

最近受《魂之幻影》项目的启发,又找到一种方法。借用CSS3的transition属性实现图片过渡,也就是淡入淡出,而由于低版本IE不支持CSS3,而且样式里面只用了opacity而没有用到filter,低版本IE会采用显示隐藏的方式展示。这样也能解决直接用Jq的fadeIn(),fadeOut()改变PNG半透明图片透明度,实现淡入淡出效果时所带来的兼容性问题。

暂时就写这么多吧,后面有新发现再补充~(≧▽≦)/~
timg.jpg

手机阅读请扫描下方二维码:

已有 2 条评论

  1. filter实现的opacity还有个坑是,子元素的字体都会有锯齿。。。所以,filter真不好用,建议直接弃用~ 另外,检测浏览器版本,如果是引入jq的项目,可以直接用内置方法$.browser,比如判断是否是ie,可以通过$.browser.msie和$.browser.version

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif