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中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
JS求解两数之和算法详解
Apr 28 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
php中hashtable实现示例分享
2014/02/13 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
Python按钮的响应事件详解
2019/03/04 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
Python内置类型性能分析过程实例
2020/01/29 Python
详解Python中import机制
2020/09/11 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
C语言笔试题回忆
2015/04/02 面试题
化工机械应届生求职信
2013/11/04 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
工程管理英文求职信
2014/03/18 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
2014年药房工作总结
2014/11/22 职场文书
综合测评个人总结
2015/03/03 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS