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');
下载地址: