How to use JavaScript to implement an opaque png Image background in ie6

When we often use png images, the background is not transparent in ie6. The following describes how to solve this problem in js.
First, we need to use a js. The Code is as follows: Copy codeThe Code is 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 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
To solve the problem that the transparent png Image under IE6 cannot be fully displayed when it is reduced
El. vml. image. fill. type = 'tile'; changed:
El. vml. image. fill. type = 'framework ';
*/

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.doc umentElement. firstChild. insertBefore (screenStyleSheet, document.doc umentElement. 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:-pixel PX; 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 has I Pr has ost for automating this! */
PrintStyleSheet = document. createElement ('style ');
PrintStyleSheet. setAttribute ('Media ', 'print ');
Document.doc umentElement. firstChild. insertBefore (printStyleSheet, document.doc umentElement. 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 */
}
},
Handlepseudo dohover: 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. iner'
**/
Fix: function (selector ){
If (this. screenStyleSheet ){
Var selectors, I;
Selectors = selector. split (',');/* multiple selectors supported, no need for multiple CALS 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.css Text = '';
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: 'handlefalsehover ', mouseenter: 'handleupload', focus: 'handleupload', blur: 'handleupload '};
For (a in moreForAs ){
If (moreForAs. hasOwnProperty ()){
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 ('onpropertychang', 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.css Text = 'behavior: none; position: absolute; left:-pixel PX; top:-pixel PX; 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 = 'ddd ';
}
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 = 'framework';/* 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.exe cCommand ("BackgroundImageCache", false, true);/* TredoSoft Multiple IE doesn't like this, so try {} it */
} Catch (r ){}
DD_belatedPNG.createVmlNameSpace ();
DD_belatedPNG.createVmlStyleSheet ();

Next let's take a look at how to use this js:
DD_belatedPNG is a PNG transparent JS plug-in perfect solution for IE6. DD_belatedPNG uses Microsoft's VML language to redraw PNG images to achieve translucent effect, it also supports the background-position and background-repeat attributes and pseudo classes. DD_belatedPNG is the best solution to the png transparency issue in many ie6 environments, and others have many negative effects.

Usage:Copy codeThe Code is as follows: <! -- [If IE 6]> <script src = "DD_belatedPNG.js"> </script> <script> DD_belatedPNG.fix('.png _ bg '); </script> <! [Endif] -->

The referenced function is DD_belatedPNG.fix (). Change * css selector .png _ bg in the brackets to your css selector name.