Posted by 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');
下载地址：