ie6下png圖片背景不透明的解決方法使用js實作_javascript技巧

我們時常在使用png圖片的時候，在ie6下發生背景不透明的問題，下面跟大家介紹下一個js解決的方式。
首先我們要用到一個js，程式碼如下：

複製程式碼 程式碼如下:

/**
* DD_belatedPNG：新增 IE6 支援：CSS 背景圖片和 HTML 的 PNG 映像。
* 作者：Drew Diller
* 電子郵件：drew.diller@gmail.com
* 網址：http://www.dillerdesign.com/experiment/DD_belatedPNG/
* 版本：0.0. 8a
* 根據MIT 許可證獲得許可：http://dillerdesign.com/experiment/DD_belatedPNG/#license
*
* 範例用法：
* DD_belatedPNG.fix('.png_bg') ; // 參數是CSS 選擇器
* DD_belatedPNG.fixPng( someNode ); // 參數是HTMLDomElement
**/
/*
請閱讀：
這個腳本中的所有內容絕對是愚蠢的。我知道這一點。 IE 對某些像素的渲染沒有意義，因此這段程式碼也沒有意義！
*/
/**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: {},
延遲: 10,
nodesFixed: 0,
createVmlNameSpace: function () { /* 啟用VML */
if (document.namespaces && !document.namespaces[this.ns]) {
document.namespaces.addument. (this.ns, 'urn:schemas-microsoft-com:vml');
}
},
createVmlStyleSheet: function () { /* 樣式VML，啟用行為*/
/*
以防萬一許多其他開發人員添加了
許多其他使用document.createStyleSheet
建立樣式表並達到31 個限制標記，我們不要使用該方法！
進一步閱讀：http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx
*/
var screenStyleSheet, printStyleSheet;
screenStyle. createElement('style');
screenStyleSheet.setAttribute('media', 'screen');
document.documentElement.firstChild.insertBefore(screenStyleSheet, document.documentElement.firstd. screenStyleSheet.styleSheet) {
screenStyleSheet = screenStyleSheet.styleSheet;
screenStyleSheet.addRule(this.ns '\:*', '{behavior:url(#defaultaultVML)}'); addRule(this.ns '\:shape', 'position:absolute;');
screenStyleSheet.addRule('img.' this.ns '_sizeFinder', '行為：無；邊框：無；位置：絕對； z-index：-1；上：-10000px；可見性：隱藏；'); /* 大的負頂部值，以避免大圖像的垂直滾動條，由James O'Brien 建議，http://www. thanatopsic.org/hendrik/ */
this.screenStyleSheet = screenStyleSheet;
/* 新增列印媒體樣式表，以防止VML 工件出現在列印中（包括預覽）。 */
/* 感謝 R閙i Pr關ost 自動化了這個！ */
printStyleSheet = document.createElement('style');
printStyleSheet.setAttribute('media', 'print');
document.documentElement.firstChild.insertBefore;
document.documentElement.firstChild.insertBefore(print🎜>document.documentElement.firstChild.insertBefore(printltyle.first .firstChild);
printStyleSheet = printStyleSheet.styleSheet;
printStyleSheet.addRule(this.ns '\:*', '{display: none !important;}');
printStyleet. .' 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') ? '無' : '阻止';
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') != -1 ) {
var trans = el.當前樣式.filter;
trans = parseInt(trans.substring(trans.lastIndexOf('=') 1, trans.lastIndexOf(')')), 10)/100 ;
el.vml.color.shape.style.filter = el.currentStyle.filter; /* 完成猜測*/
el.vml.image.fill.opacity = trans; /* 完成猜測*/
}
},
handlePseudoHover: function (el) {
setTimeout(function () { /* 如果沒有setTimeout，則無法如預期般運作*/
DD_belatedPNG .applyVML(el);
}, 1);
},
/**
* 這是在文件中使用的方法。
* @param {String} 選擇器 - 必要 - CSS 選擇器，例如 '#doc .container'
**/
修正：函數（選取器）{
if (this.screenStyleSheet) {
var 選擇器，i;
選擇器=選擇器.split(','); /* 支援多個選擇器，不再需要多次呼叫*/
for (i=0; ithis.screenStyleSheet.addRule(selectors[i], 'behavior :表達式(DD_belatedPNG.fixPng(this))'); /* 似乎執行該函數而不將其添加到樣式表- 有趣... */
}
}
},
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;
自我=這個;
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 == '靜態') {
el.style.position = '相對';
}
},
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]) { /* 決定載入圖片的大小*/
img = document.createElement('img')
lib.imgSize[el.vmlBg] = img;
img.className = lib.ns '_sizeFinder';
img.runtimeStyle.cssText = '行為：無位置：-10000px ; ; border:0; csding :0;'; /*確保將行為設為none 以防止意外匹配輔助元素！ 🎜>this.width = this.offsetWidth; /* 奇怪的存儲破壞要求！ vmlOffsets(el); .attachEvent('onload', imgLoaded);
img.src = el.vmlBg;
img.removeAttribute('width');
img.removeAttribute('height'); body.insertBefore(img, document.body.firstChild);
}
el.vml.image.fill.src = el.vmlBg; = false
}
el.vml.image.fillml.image.fillml.image.fill.v.image. .on = !noImg>el.vml.image.fill.color = '無';
el.vml.color.shape.style.backgroundColor = elStyle.backgroundColor;
el.runtimeStyle.backgroundImage = '無' ';
el.runtimeStyle.backgroundColor = '透明';
},
/* IE 無法弄清楚當offsetLeft 和clientLeft加起來為1時會做什麼，並且VML最終變化要模糊…所以我們必須將東西推/放大1個像素然後剪掉多餘的*/
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};
軟糖 = (size.L size.bLW == 1) ? 1：0；
/* vml 形狀、左、上、寬、高、原點 */
makeVisible = function (vml, l, t, w, h, o) {
vml.coordsize = w ','小時；
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) ), (尺寸.W-1), (尺寸.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 軟糖, 'B':size.H, 'L':1 軟糖}; /* 這些是任何型別重複的預設值 */
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 尺寸.h), 'L':(bg.X)}; /* 這些是無重複的預設值- 剪輯到影像位置*/
if (bgR.search('repeat-') != -1) { /* 現在讓我們恢復到dC 進行重複x 或重複-y */
v = bgR.split('repeat-')[1].toUpperCase();
c[altC[v].b1] = 1;
c[altC[v] .b2] = 大小[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：函數（背景、大小、軸、位置）{
var 水平、分數；
分數=真；
水平= (軸== 'X');
switch(位置) {
case '左':
case '上':
bg[axis] = 0;
休息；
案例「中心」：
bg[軸] = 0.5 ;
休息；
case '右':
case '下':
bg[axis] = 1;
休息；
預設值：
if (position. search('%') != -1) {
bg[axis] = parseInt(position, 10) / 100;
}
else {
分數= false;
}
}
bg[軸] = Math.ceil( 分數? ( (尺寸[水平?'W': 'H'] * bg[軸]) - (尺寸[水平?'w ': 'h' ] * bg[axis]) ) : parseInt(position, 10) );
if (bg[軸] % 2 === 0) {
bg[軸] ;
}
返回bg[軸];
},
fixPng: function (el) {
el.style.behavior = 'none';
var lib, els, nodeStr, v, e;
if (el.nodeName == 'BODY' || el.nodeName == 'TD' || el.nodeName == 'TR') { /* 尚未支援的元素*/
return;
}
el.isImg = false;
if (el.nodeName == 'IMG') {
if(el.src.toLowerCase().search(/.png$/) != -1) {
el.isImg = true ;
el.style.visibility = '隱藏';
}
其他{
回傳；
}
}
else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1) {
return;
}
lib = DD_belatedPNG;
el.vml = {顏色： {}，圖片：{}}；
els = {形狀：{}，填入：{}}；
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.lines = false;
el.vml[v].shape.appendChild(el.vml [v].fill);
el.parentNode.insertBefore(el.vml[v].shape, el);
}
}
el.vml.image.shape.fillcolor = '無'; /* 等待圖片載入時不顯示空白的白色shapeangle。 */
//el.vml.image.fill.type = 'tile'; /* 使影像顯示出來。 */
el.vml.image.fill.type = 'frame'; /* 2012.1.12 */
el.vml.color.fill.on = false; /* 實際上要套用vml 元素的style.backgroundColor，因此隱藏白色。 */
lib.attachHandlers(el);
lib.giveLayout(el);
lib.giveLayout(el.offsetParent);
el.vmlInitiated = true;
lib.applyVML(lib.applyVML( el); /* 使成為！ */
}
};
嘗試{
document.execCommand("BackgroundImageCache", false, true); /* TredoSoft Multiple IE 不喜歡這樣，所以試試看*/
} catch(r) {}
DD_belatedPNG.createVmlNameSpace();
DD_belatedPNG.createVmlStyleSheet();

我們看怎麼使用這個> DD_belatedPNG是一款完美解決IE6下的PNG透明JS插件，DD_belatedPNG使用了微軟的VML語言對PNG圖片進行重複，以達到半透明的效果，並且能夠支援background-position和background-repeat屬性，支援a類。在人群的ie6下png透明問題上，DD_belatedPNG是最好的解決方案，其他的都有

使用方法
：

複製程式碼程式碼如下：

DD_belatedPNG.fix('.png_bg');

引用函數是DD_belatedPNG.fix()，事實上裡面的*表示所有css選擇器.png_bg改成你的css選擇器名稱。