ie6下png图片背景不透明的解决办法使用js实现


Posted in Javascript onJanuary 11, 2013

我们时常在使用png图片的时候,在ie6下发生背景不透明的问题,下面给大家介绍下一个js解决的方式。
首先我们要用到一个js,代码如下:

/** 
* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>. 
* Author: Drew Diller 
* Email: drew.diller@gmail.com 
* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/ 
* Version: 0.0.8a 
* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license 
* 
* Example usage: 
* DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector 
* DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement 
**/ 
/* 
PLEASE READ: 
Absolutely everything in this script is SILLY. I know this. IE's rendering of certain pixels doesn't make sense, so neither does this code! 
*/ 
/** rewrite by waitingbar 2012.1.12 
为了解决IE6下透明的png图片缩小时不能完全显示问题 
el.vml.image.fill.type = 'tile'; 改为: 
el.vml.image.fill.type = 'frame'; 
*/ var DD_belatedPNG = { 
ns: 'DD_belatedPNG', 
imgSize: {}, 
delay: 10, 
nodesFixed: 0, 
createVmlNameSpace: function () { /* enable VML */ 
if (document.namespaces && !document.namespaces[this.ns]) { 
document.namespaces.add(this.ns, 'urn:schemas-microsoft-com:vml'); 
} 
}, 
createVmlStyleSheet: function () { /* style VML, enable behaviors */ 
/* 
Just in case lots of other developers have added 
lots of other stylesheets using document.createStyleSheet 
and hit the 31-limit mark, let's not use that method! 
further reading: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx 
*/ 
var screenStyleSheet, printStyleSheet; 
screenStyleSheet = document.createElement('style'); 
screenStyleSheet.setAttribute('media', 'screen'); 
document.documentElement.firstChild.insertBefore(screenStyleSheet, document.documentElement.firstChild.firstChild); 
if (screenStyleSheet.styleSheet) { 
screenStyleSheet = screenStyleSheet.styleSheet; 
screenStyleSheet.addRule(this.ns + '\\:*', '{behavior:url(#default#VML)}'); 
screenStyleSheet.addRule(this.ns + '\\:shape', 'position:absolute;'); 
screenStyleSheet.addRule('img.' + this.ns + '_sizeFinder', 'behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;'); /* large negative top value for avoiding vertical scrollbars for large images, suggested by James O'Brien, http://www.thanatopsic.org/hendrik/ */ 
this.screenStyleSheet = screenStyleSheet; 
/* Add a print-media stylesheet, for preventing VML artifacts from showing up in print (including preview). */ 
/* Thanks to R?i Pr?ost for automating this! */ 
printStyleSheet = document.createElement('style'); 
printStyleSheet.setAttribute('media', 'print'); 
document.documentElement.firstChild.insertBefore(printStyleSheet, document.documentElement.firstChild.firstChild); 
printStyleSheet = printStyleSheet.styleSheet; 
printStyleSheet.addRule(this.ns + '\\:*', '{display: none !important;}'); 
printStyleSheet.addRule('img.' + this.ns + '_sizeFinder', '{display: none !important;}'); 
} 
}, 
readPropertyChange: function () { 
var el, display, v; 
el = event.srcElement; 
if (!el.vmlInitiated) { 
return; 
} 
if (event.propertyName.search('background') != -1 || event.propertyName.search('border') != -1) { 
DD_belatedPNG.applyVML(el); 
} 
if (event.propertyName == 'style.display') { 
display = (el.currentStyle.display == 'none') ? 'none' : 'block'; 
for (v in el.vml) { 
if (el.vml.hasOwnProperty(v)) { 
el.vml[v].shape.style.display = display; 
} 
} 
} 
if (event.propertyName.search('filter') != -1) { 
DD_belatedPNG.vmlOpacity(el); 
} 
}, 
vmlOpacity: function (el) { 
if (el.currentStyle.filter.search('lpha') != -1) { 
var trans = el.currentStyle.filter; 
trans = parseInt(trans.substring(trans.lastIndexOf('=')+1, trans.lastIndexOf(')')), 10)/100; 
el.vml.color.shape.style.filter = el.currentStyle.filter; /* complete guesswork */ 
el.vml.image.fill.opacity = trans; /* complete guesswork */ 
} 
}, 
handlePseudoHover: function (el) { 
setTimeout(function () { /* wouldn't work as intended without setTimeout */ 
DD_belatedPNG.applyVML(el); 
}, 1); 
}, 
/** 
* This is the method to use in a document. 
* @param {String} selector - REQUIRED - a CSS selector, such as '#doc .container' 
**/ 
fix: function (selector) { 
if (this.screenStyleSheet) { 
var selectors, i; 
selectors = selector.split(','); /* multiple selectors supported, no need for multiple calls to this anymore */ 
for (i=0; i<selectors.length; i++) { 
this.screenStyleSheet.addRule(selectors[i], 'behavior:expression(DD_belatedPNG.fixPng(this))'); /* seems to execute the function without adding it to the stylesheet - interesting... */ 
} 
} 
}, 
applyVML: function (el) { 
el.runtimeStyle.cssText = ''; 
this.vmlFill(el); 
this.vmlOffsets(el); 
this.vmlOpacity(el); 
if (el.isImg) { 
this.copyImageBorders(el); 
} 
}, 
attachHandlers: function (el) { 
var self, handlers, handler, moreForAs, a, h; 
self = this; 
handlers = {resize: 'vmlOffsets', move: 'vmlOffsets'}; 
if (el.nodeName == 'A') { 
moreForAs = {mouseleave: 'handlePseudoHover', mouseenter: 'handlePseudoHover', focus: 'handlePseudoHover', blur: 'handlePseudoHover'}; 
for (a in moreForAs) { 
if (moreForAs.hasOwnProperty(a)) { 
handlers[a] = moreForAs[a]; 
} 
} 
} 
for (h in handlers) { 
if (handlers.hasOwnProperty(h)) { 
handler = function () { 
self[handlers[h]](el); 
}; 
el.attachEvent('on' + h, handler); 
} 
} 
el.attachEvent('onpropertychange', this.readPropertyChange); 
}, 
giveLayout: function (el) { 
el.style.zoom = 1; 
if (el.currentStyle.position == 'static') { 
el.style.position = 'relative'; 
} 
}, 
copyImageBorders: function (el) { 
var styles, s; 
styles = {'borderStyle':true, 'borderWidth':true, 'borderColor':true}; 
for (s in styles) { 
if (styles.hasOwnProperty(s)) { 
el.vml.color.shape.style[s] = el.currentStyle[s]; 
} 
} 
}, 
vmlFill: function (el) { 
if (!el.currentStyle) { 
return; 
} else { 
var elStyle, noImg, lib, v, img, imgLoaded; 
elStyle = el.currentStyle; 
} 
for (v in el.vml) { 
if (el.vml.hasOwnProperty(v)) { 
el.vml[v].shape.style.zIndex = elStyle.zIndex; 
} 
} 
el.runtimeStyle.backgroundColor = ''; 
el.runtimeStyle.backgroundImage = ''; 
noImg = true; 
if (elStyle.backgroundImage != 'none' || el.isImg) { 
if (!el.isImg) { 
el.vmlBg = elStyle.backgroundImage; 
el.vmlBg = el.vmlBg.substr(5, el.vmlBg.lastIndexOf('")')-5); 
} 
else { 
el.vmlBg = el.src; 
} 
lib = this; 
if (!lib.imgSize[el.vmlBg]) { /* determine size of loaded image */ 
img = document.createElement('img'); 
lib.imgSize[el.vmlBg] = img; 
img.className = lib.ns + '_sizeFinder'; 
img.runtimeStyle.cssText = 'behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;'; /* make sure to set behavior to none to prevent accidental matching of the helper elements! */ 
imgLoaded = function () { 
this.width = this.offsetWidth; /* weird cache-busting requirement! */ 
this.height = this.offsetHeight; 
lib.vmlOffsets(el); 
}; 
img.attachEvent('onload', imgLoaded); 
img.src = el.vmlBg; 
img.removeAttribute('width'); 
img.removeAttribute('height'); 
document.body.insertBefore(img, document.body.firstChild); 
} 
el.vml.image.fill.src = el.vmlBg; 
noImg = false; 
} 
el.vml.image.fill.on = !noImg; 
el.vml.image.fill.color = 'none'; 
el.vml.color.shape.style.backgroundColor = elStyle.backgroundColor; 
el.runtimeStyle.backgroundImage = 'none'; 
el.runtimeStyle.backgroundColor = 'transparent'; 
}, 
/* IE can't figure out what do when the offsetLeft and the clientLeft add up to 1, and the VML ends up getting fuzzy... so we have to push/enlarge things by 1 pixel and then clip off the excess */ 
vmlOffsets: function (el) { 
var thisStyle, size, fudge, makeVisible, bg, bgR, dC, altC, b, c, v; 
thisStyle = el.currentStyle; 
size = {'W':el.clientWidth+1, 'H':el.clientHeight+1, 'w':this.imgSize[el.vmlBg].width, 'h':this.imgSize[el.vmlBg].height, 'L':el.offsetLeft, 'T':el.offsetTop, 'bLW':el.clientLeft, 'bTW':el.clientTop}; 
fudge = (size.L + size.bLW == 1) ? 1 : 0; 
/* vml shape, left, top, width, height, origin */ 
makeVisible = function (vml, l, t, w, h, o) { 
vml.coordsize = w+','+h; 
vml.coordorigin = o+','+o; 
vml.path = 'm0,0l'+w+',0l'+w+','+h+'l0,'+h+' xe'; 
vml.style.width = w + 'px'; 
vml.style.height = h + 'px'; 
vml.style.left = l + 'px'; 
vml.style.top = t + 'px'; 
}; 
makeVisible(el.vml.color.shape, (size.L + (el.isImg ? 0 : size.bLW)), (size.T + (el.isImg ? 0 : size.bTW)), (size.W-1), (size.H-1), 0); 
makeVisible(el.vml.image.shape, (size.L + size.bLW), (size.T + size.bTW), (size.W), (size.H), 1 ); 
bg = {'X':0, 'Y':0}; 
if (el.isImg) { 
bg.X = parseInt(thisStyle.paddingLeft, 10) + 1; 
bg.Y = parseInt(thisStyle.paddingTop, 10) + 1; 
} 
else { 
for (b in bg) { 
if (bg.hasOwnProperty(b)) { 
this.figurePercentage(bg, size, b, thisStyle['backgroundPosition'+b]); 
} 
} 
} 
el.vml.image.fill.position = (bg.X/size.W) + ',' + (bg.Y/size.H); 
bgR = thisStyle.backgroundRepeat; 
dC = {'T':1, 'R':size.W+fudge, 'B':size.H, 'L':1+fudge}; /* these are defaults for repeat of any kind */ 
altC = { 'X': {'b1': 'L', 'b2': 'R', 'd': 'W'}, 'Y': {'b1': 'T', 'b2': 'B', 'd': 'H'} }; 
if (bgR != 'repeat' || el.isImg) { 
c = {'T':(bg.Y), 'R':(bg.X+size.w), 'B':(bg.Y+size.h), 'L':(bg.X)}; /* these are defaults for no-repeat - clips down to the image location */ 
if (bgR.search('repeat-') != -1) { /* now let's revert to dC for repeat-x or repeat-y */ 
v = bgR.split('repeat-')[1].toUpperCase(); 
c[altC[v].b1] = 1; 
c[altC[v].b2] = size[altC[v].d]; 
} 
if (c.B > size.H) { 
c.B = size.H; 
} 
el.vml.image.shape.style.clip = 'rect('+c.T+'px '+(c.R+fudge)+'px '+c.B+'px '+(c.L+fudge)+'px)'; 
} 
else { 
el.vml.image.shape.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)'; 
} 
}, 
figurePercentage: function (bg, size, axis, position) { 
var horizontal, fraction; 
fraction = true; 
horizontal = (axis == 'X'); 
switch(position) { 
case 'left': 
case 'top': 
bg[axis] = 0; 
break; 
case 'center': 
bg[axis] = 0.5; 
break; 
case 'right': 
case 'bottom': 
bg[axis] = 1; 
break; 
default: 
if (position.search('%') != -1) { 
bg[axis] = parseInt(position, 10) / 100; 
} 
else { 
fraction = false; 
} 
} 
bg[axis] = Math.ceil( fraction ? ( (size[horizontal?'W': 'H'] * bg[axis]) - (size[horizontal?'w': 'h'] * bg[axis]) ) : parseInt(position, 10) ); 
if (bg[axis] % 2 === 0) { 
bg[axis]++; 
} 
return bg[axis]; 
}, 
fixPng: function (el) { 
el.style.behavior = 'none'; 
var lib, els, nodeStr, v, e; 
if (el.nodeName == 'BODY' || el.nodeName == 'TD' || el.nodeName == 'TR') { /* elements not supported yet */ 
return; 
} 
el.isImg = false; 
if (el.nodeName == 'IMG') { 
if(el.src.toLowerCase().search(/\.png$/) != -1) { 
el.isImg = true; 
el.style.visibility = 'hidden'; 
} 
else { 
return; 
} 
} 
else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1) { 
return; 
} 
lib = DD_belatedPNG; 
el.vml = {color: {}, image: {}}; 
els = {shape: {}, fill: {}}; 
for (v in el.vml) { 
if (el.vml.hasOwnProperty(v)) { 
for (e in els) { 
if (els.hasOwnProperty(e)) { 
nodeStr = lib.ns + ':' + e; 
el.vml[v][e] = document.createElement(nodeStr); 
} 
} 
el.vml[v].shape.stroked = false; 
el.vml[v].shape.appendChild(el.vml[v].fill); 
el.parentNode.insertBefore(el.vml[v].shape, el); 
} 
} 
el.vml.image.shape.fillcolor = 'none'; /* Don't show blank white shapeangle when waiting for image to load. */ 
//el.vml.image.fill.type = 'tile'; /* Makes image show up. */ 
el.vml.image.fill.type = 'frame'; /* 2012.1.12 */ 
el.vml.color.fill.on = false; /* Actually going to apply vml element's style.backgroundColor, so hide the whiteness. */ 
lib.attachHandlers(el); 
lib.giveLayout(el); 
lib.giveLayout(el.offsetParent); 
el.vmlInitiated = true; 
lib.applyVML(el); /* Render! */ 
} 
}; 
try { 
document.execCommand("BackgroundImageCache", false, true); /* TredoSoft Multiple IE doesn't like this, so try{} it */ 
} catch(r) {} 
DD_belatedPNG.createVmlNameSpace(); 
DD_belatedPNG.createVmlStyleSheet();

下面我们来看怎么使用这个js
DD_belatedPNG是一款完美解决IE6下的PNG透明JS插件,DD_belatedPNG使用了微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性,支持伪类。在众多的ie6下png透明问题上,DD_belatedPNG是最好的解决方案,其它的都有很多负作用。

使用方法

< !--[if IE 6]><script src="DD_belatedPNG.js"></script><script> DD_belatedPNG.fix('.png_bg');</script><![endif]-->

引用函数是DD_belatedPNG.fix(),括号里的 *表示所有css选择器.png_bg 改成你的css选择器名称。
Javascript 相关文章推荐
js读取配置文件自写
Feb 11 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
关于全局变量和局部变量的那些事
Jan 11 #Javascript
jquery延迟加载外部js实现代码
Jan 11 #Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 #Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 #Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 #Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 #Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 #Javascript
You might like
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
JQuery toggle使用分析
2009/11/16 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
利用Python如何生成随机密码
2016/04/20 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
农田水利实习自我鉴定
2013/09/19 职场文书
高一数学教学反思
2014/02/07 职场文书
优秀应届生求职信
2014/06/16 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
西岭雪山导游词
2015/02/06 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
服务行业标语口号
2015/12/26 职场文书
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers