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的页面访问速度。