We often use the PNG picture, in the IE6 under the background of the opaque problem, below to introduce you next JS solution.
First we need to use a JS, the code is as follows:
Copy Code code as follows:
/**
* Dd_belatedpng:adds IE6 support:png images for CSS background-image and HTML .
* 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 the 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
Unable to fully display the problem when the transparent PNG picture is reduced under IE6
El.vml.image.fill.type = ' tile '; To
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 the 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.than atopsic.org/hendrik/*
This.screenstylesheet = Screenstylesheet;
/* Add a Print-media stylesheet, for preventing VML artifacts from showing up in print (including preview). */
/* R 閙 I PR about us 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 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 does the offsetleft and the ClientLeft add up to 1, and the VML ends up getting fuzzy ... so We have to push/enlarge things through 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 the 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 ();
Now let's see how to use this JS：
Dd_belatedpng is a perfect solution IE6 under the PNG transparent JS plug-in, Dd_belatedpng used the Microsoft VML language to redraw the PNG image to achieve translucent effect, and can support Background-position and Background-repeat properties, support Pseudo class. Dd_belatedpng is the best solution for the many IE6 PNG transparency issues, others have a lot of negative effects.
How to use：
Copy Code code as follows:
<!--[if IE 6]><script src= "Dd_belatedpng.js" ></script><script> dd_belatedpng.fix ('. Png_bg ') ); </script><! [endif]-->
The reference function is Dd_belatedpng.fix (), and the * in parentheses indicates all CSS selectors. PNG_BG to your CSS selector name.
