06月14, 2011

ie6下png alpha透明显示js实现

概述

大家应该都知道ie6只支持png8的索引透明,不支持alpha透明(也就是半透明)。

所以在设计的时候一般尽量减少使用半透明,但有些时候为了达到更好的效果不得不使用。

针对这个问题已经有了多种解决方案。

css代码里进行filter

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://hi.bdimg.com/static/apps/appdashan/img/bg_gril.png?v=20101125", sizingMethod='crop');
_background:none;

这种方式是最被大家接受的方式,但这种方式有下面2个问题:

1、需要hack的地方都要把上面的代码加一遍

2、filter里src的地址必须是带域名的绝对路径,这可给开发带来非常大的麻烦。因为开发时一般用的都是线下域名,用线上域名的话就没办法看效果,用线下域名的话如果上线前忘记替换支持导致用户看不到背景图。

htc方式

这种方式是外链一个htc文件,这个文件的内容还是挺多的。这样对页面性能也是个问题。

具体可以见这里

js的filter方式

这种方式也是这篇文章介绍的,既然可以使用css的filter,那么当然也可以使用js来实现。

这种方式的好处是只要给要hack的地方加上一个class即可。

function ie6Filter(s){
    //解决ie6下png32显示的问题
    if($.browser.msie && parseInt($.browser.version)==6){
        var m = /url\s*\(([\'\"]?)(.*?)\1\)/,
             selector = s || '.png32';
        $(selector).each(function(){
            var $this = $(this);
            if($this.attr('data-png32filter') == '1') return;
            var b = $this.css('background-image'),
                url = m.exec(b);
            if(!url || url.length < 3) return;
            url = url[2];
            if(url){
                $this.css({
                     'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src="'+url+'");',
                    'background-image':'none'
                });
            }
            $this.attr('data-png32filter', '1');
        })
    }
}

上面的代码就是基于jquery的ie6Filter的实现,这样在需要进行hack的地方加上class="png32"就可以了,然后在dom ready的时候执行这个函数即可。

其他问题

1、这种方式下同样不能解决背景图想repeat-y的情况

2、这种方式下背景图不能合并在一张图上。可以增加各额外的标签来解决这个问题,具体看这里

3、这种图片一般都比较大,非IE6下实际上支持256色的半透明,可以在编译的时候将图片生成2各版本,原生的图片供IE6使用,优化的图片给非IE6使用。这样直接提升了非IE6的页面访问速度。

本文链接:http://welefen.com/post/ie6%e4%b8%8bpng-alpha%e9%80%8f%e6%98%8e%e6%98%be%e7%a4%bajs%e5%ae%9e%e7%8e%b0.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。