IE6 PNG图片透明的几种解决方案

IE6 PNG背景怎么透明? 在前端设计当中常遇到的问题,也是新手常问到的问题。今天来总结几种方法,解决IE6下PNG图片透明的问题。
一、图片替换
使用GIF或PNG8(索引透明)来代替PNG图片

.png{background:url(image.png); _background:url(image.gif);}

特别说明一下:IE6是支持PNG索引透明的(即要么全透明,要么不透明),但不支持png的 alpha 透明(即半透明)
缺点:GIF图片色彩差了很多,特别是渐变色,有白色虚边。对色彩度要求不高,纯白色可以考虑此方法。
二、CSS滤镜(filter)
使用AlphaImageLoader加载PNG图片

.png{background:url(image.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png' , sizingMethod='scale' ); }

缺点:IE6下背景无法平铺,性能差。而且页面使用filter 滤镜以后会出现这样那样的怪问题。页面中次数不是很多的时候该办法还是可行的。

三、javascript
原理同上,只不过是通过javascript来批量处理
jqery版:

(function($) {
    jQuery.fn.pngFix = function(settings) {
        settings = jQuery.extend({
            blankgif: 'blank.gif'
        },
        settings);
        var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
        var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);
        if (jQuery.browser.msie && (ie55 || ie6)) {
            jQuery(this).find("img[src$='.png']").each(function() {
                jQuery(this).attr('width', jQuery(this).width());
                jQuery(this).attr('height', jQuery(this).height());
                var prevStyle = '';
                var strNewHTML = '';
                var imgId = (jQuery(this).attr('id')) ? 'id="' + jQuery(this).attr('id') + '" ': '';
                var imgClass = (jQuery(this).attr('class')) ? 'class="' + jQuery(this).attr('class') + '" ': '';
                var imgTitle = (jQuery(this).attr('title')) ? 'title="' + jQuery(this).attr('title') + '" ': '';
                var imgAlt = (jQuery(this).attr('alt')) ? 'alt="' + jQuery(this).attr('alt') + '" ': '';
                var imgAlign = (jQuery(this).attr('align')) ? 'float:' + jQuery(this).attr('align') + ';': '';
                var imgHand = (jQuery(this).parent().attr('href')) ? 'cursor:hand;': '';
                if (this.style.border) {
                    prevStyle += 'border:' + this.style.border + ';';
                    this.style.border = ''
                }
                if (this.style.padding) {
                    prevStyle += 'padding:' + this.style.padding + ';';
                    this.style.padding = ''
                }
                if (this.style.margin) {
                    prevStyle += 'margin:' + this.style.margin + ';';
                    this.style.margin = ''
                }
                var imgStyle = (this.style.cssText);
                strNewHTML += '';
                if (prevStyle != '') {
                    strNewHTML = '' + strNewHTML + ''
                }
                jQuery(this).hide();
                jQuery(this).after(strNewHTML)
            });
            jQuery(this).find("*").each(function() {
                var bgIMG = jQuery(this).css('background-image');
                if (bgIMG.indexOf(".png") != -1) {
                    var iebg = bgIMG.split('url("')[1].split('")')[0];
                    jQuery(this).css('background-image', 'none');
                    jQuery(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='scale')"
                }
            });
            jQuery(this).find("input[src$='.png']").each(function() {
                var bgIMG = jQuery(this).attr('src');
                jQuery(this).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + bgIMG + '\', sizingMethod=\'scale\');';
                jQuery(this).attr('src', settings.blankgif)
            })
        }
        return jQuery
    }
})(jQuery);

//用法:
    $(document).ready(function(){ 
        $(document).pngFix(); 
    });
            

下载地址:

另一个版本:

(function($) {
    $.ifixpng = function(customPixel) {
        $.ifixpng.pixel = customPixel
    };
    $.ifixpng.getPixel = function() {
        return $.ifixpng.pixel || 'images/pixel.gif'
    };
    var hack = {
        ltie7: $.browser.msie && $.browser.version < 7,
        filter: function(src) {
            return "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='" + src + "')"
        }
    };
    $.fn.ifixpng = hack.ltie7 ? 
    function() {
        return this.each(function() {
            var $$ = $(this);
            var base = $('base').attr('href');
            if (base) {
                base = base.replace(/\/[^\/]+$/, '/')
            }
            if ($$.is('img') || $$.is('input')) {
                if ($$.attr('src')) {
                    if ($$.attr('src').match(/.*\.png([?].*)?$/i)) {
                        var source = (base && $$.attr('src').search(/^(\/|http:)/i)) ? base + $$.attr('src') : $$.attr('src');
                        $$.css({
                            filter: hack.filter(source),
                            width: $$.width(),
                            height: $$.height()
                        }).attr({
                            src: $.ifixpng.getPixel()
                        }).positionFix()
                    }
                }
            } else {
                var image = $$.css('backgroundImage');
                if (image.match(/^url\(["']?(.*\.png([?].*)?)["']?\)$/i)) {
                    image = RegExp.$1;
                    image = (base && image.substring(0, 1) != '/') ? base + image: image;
                    $$.css({
                        backgroundImage: 'none',
                        filter: hack.filter(image)
                    }).children().children().positionFix()
                }
            }
        })
    }: function() {
        return this
    };
    $.fn.iunfixpng = hack.ltie7 ? 
    function() {
        return this.each(function() {
            var $$ = $(this);
            var src = $$.css('filter');
            if (src.match(/src=["']?(.*\.png([?].*)?)["']?/i)) {
                src = RegExp.$1;
                if ($$.is('img') || $$.is('input')) {
                    $$.attr({
                        src: src
                    }).css({
                        filter: ''
                    })
                } else {
                    $$.css({
                        filter: '',
                        background: 'url(' + src + ')'
                    })
                }
            }
        })
    }: function() {
        return this
    };
    $.fn.positionFix = function() {
        return this.each(function() {
            var $$ = $(this);
            var position = $$.css('position');
            if (position != 'absolute' && position != 'relative') {
                $$.css({
                    position: 'relative'
                })
            }
        })
    }
})(jQuery);
//用法
$('#logo').pngfix();

下载地址:

javascript 版本:

var supersleight = function() {
    var root = false;
    var applyPositioning = true;
    var shim = 'x.gif';
    var shim_pattern = /x\.gif$/i;
    var fnLoadPngs = function() {
        if (root) {
            root = document.getElementById(root)
        } else {
            root = document
        }
        for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
            if (obj.currentStyle.backgroundImage.match(/\.png/i) !== null) {
                bg_fnFixPng(obj)
            }
            if (obj.tagName == 'IMG' && obj.src.match(/\.png$/i) !== null) {
                el_fnFixPng(obj)
            }
            if (applyPositioning && (obj.tagName == 'A' || obj.tagName == 'INPUT') && obj.style.position === '') {
                obj.style.position = 'relative'
            }
        }
    };
    var bg_fnFixPng = function(obj) {
        var mode = 'scale';
        var bg = obj.currentStyle.backgroundImage;
        var src = bg.substring(5, bg.length - 2);
        if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
            mode = 'crop'
        }
        obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
        obj.style.backgroundImage = 'url(' + shim + ')'
    };
    var el_fnFixPng = function(img) {
        var src = img.src;
        img.style.width = img.width + "px";
        img.style.height = img.height + "px";
        img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
        img.src = shim
    };
    var addLoadEvent = function(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload()
                }
                func()
            }
        }
    };
    return {
        init: function() {
            addLoadEvent(fnLoadPngs)
        },
        limitTo: function(el) {
            root = el
        },
        run: function() {
            fnLoadPngs()
        }
    }
} ();
supersleight.init();

另一个版本:

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in  with DEFER keyword wrapped in conditional comments:


*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

缺点:同上
提示:图片显示大红叉确认透明GIF图片(blank.gif)文件是否存在

三、.htc文件

什么是htc文件?

从5.5版本开始,Internet Explorer(IE)开始支持Web 行为的概念。这些行为是由后缀名为.htc的脚本文件描述的,它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能"连接"到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。Web 行为还是推荐的扩展IE对象模型和控件集的方法。微软在它的开发者站点上的DHTML 行为库栏目里提供了几个定制的Web行为。我会在本文中讨论一个比较新的Web 行为:WebService行为...[百度百科]

用法:


页面标签使用behavior:url("iepngfix.htc");来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。

下载地址:

说明:iepngfix.htc路径是相对于当前HTML文件,不是CSS文件。
提示:使用无效请检查iepngfix.htc路径是否正确,图片显示大红叉确认blank.gif文件是否存在,blank.gif必须和iepngfix.htc在同一文件夹

四 VML绘制(DD_belatedPNG)

DD_belatedPNG,支持backgrond-position与background-repeat,同时DD_belatedPNG还支持a:hover属性,以及 img 标签。是解决IE6不支持PNG绝佳完美方案
原理:
这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.
用法:

//DD_belatedPNG提供了以下两种调用方法:
//DD_belatedPNG.fix()

//fix()
fix('.example1, .example2, img');
//支持a:hover方法
DD_belatedPNG.fix('.png_bg,.png a:hover');

下载地址:

发表评论

电子邮件地址不会被公开。 必填项已用*标注