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 相关文章推荐
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
element-ui点击查看大图的方法示例
Dec 14 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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
python获取各操作系统硬件信息的方法
2015/06/03 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python实现文本文件合并
2015/12/29 Python
浅谈django中的认证与登录
2016/10/31 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
pygame实现简易飞机大战
2018/09/11 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
全球工业:Global Industrial
2020/02/01 全球购物
小学音乐教学反思
2014/02/05 职场文书
工作鉴定评语
2014/05/04 职场文书
篮球比赛口号
2014/06/10 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
业务员岗位职责
2015/02/03 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书