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 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
extjs fckeditor集成代码
May 10 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
js制作简易年历完整实例
Jan 28 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
关于全局变量和局部变量的那些事
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
php中实现记住密码自动登录的代码
2011/03/02 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
bootstrap响应式工具使用详解
2017/11/29 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
vue计算属性computed的使用方法示例
2019/03/13 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
简单的编程0基础下Python入门指引
2015/04/01 Python
Django 路由系统URLconf的使用
2018/10/11 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
css sprite简单实例
2016/05/23 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
机电一体化自荐信
2013/12/10 职场文书
技能比赛获奖感言
2014/02/14 职场文书
单位工作证明书格式
2014/10/04 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
故意杀人案辩护词
2015/05/21 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
爱国主题班会教案
2015/08/14 职场文书
电工实训心得体会
2016/01/14 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python