IE6 resolving PNG picture transparency issues

Look at the various methods on the Internet, choose a better,

Description: Online said can solve hover problem, but I try not to know why not, (can see before the IE6 to solve the hover article) but to solve the page directly referenced by the small icon is still very good, after all, you use a small GIF icon, the sawtooth is very serious, PNG is much better.

Here's how:

1. Download the Dd_belatedpng.js code as follows:

PS: This code has been added at the end, organized into the corresponding folder, not to say

Dd_belatedpng.fix (". Pngfix,.pngfix:hover");

1 varDd_belatedpng={ns: "Dd_belatedpng", Imgsize:{},delay:10,nodesfixed:0,createvmlnamespace:function(){if(document.namespaces&&!document.namespaces[ This. NS]) {Document.namespaces.add ( This. NS, "URN:SCHEMAS-MICROSOFT-COM:VML")}},createvmlstylesheet:function(){varB,a;b=document.createelement ("style"); B.setattribute ("Media", "screen"); Document.documentElement.firstChild.insertBefore (B,document.documentelement.firstchild.firstchild);if(B.stylesheet) {B=b.stylesheet;b.addrule ( This. ns+ "\:*", "{Behavior:url (#default #vml)}"); B.addrule ( This. ns+ "\\:shape", "position:absolute;"); B.addrule ("img." + This. ns+ "_sizefinder", "Behavior:none; Border:none; Position:absolute; Z-index:-1; top:-10000px; Visibility:hidden; "); This. Screenstylesheet=b;a=document.createelement ("style"); A.setattribute ("Media", "print"); Document.documentElement.firstChild.insertBefore (a,document.documentelement.firstchild.firstchild); a= A.stylesheet;a.addrule ( This. ns+ "\:*", "{Display:none!important;}"); A.addrule ("img." + This. ns+ "_sizefinder", "{Display:none!important;}")}},readpropertychange:function(){varB,c,a;b=event.srcelement;if(!b.vmlinitiated) {return}if(Event.propertyName.search ("background")!=-1| | Event.propertyName.search ("border")!=-1) {dd_belatedpng.applyvml (b)}if(event.propertyname== "Style.display") {c= (b.currentstyle.display== "None")? " None ":" Block "; for(AinchB.VML) {if(B.vml.hasownproperty (a)) {B.vml[a].shape.style.display=c}}}if(Event.propertyName.search ("filter")!=-1) {dd_belatedpng.vmlopacity (b)}},vmlopacity:function(b) {if(B.currentstyle.filter.search ("Lpha")!=-1) {var A=b.currentstyle.filter;a=parseint (A.substring (a.lastindexof ("=") +1,a.lastindexof (")"), 10)/100; B.vml.color.shape.style.filter=b.currentstyle.filter;b.vml.image.fill.opacity=a}},handlepseudohover:function (A {SetTimeout (function () {DD_BELATEDPNG.APPLYVML (a)},1)},fix:function (a) {if (This.screenstylesheet) {var c,b;c= A.split (","); for (b=0;b<c.length;b++) {this.screenStyleSheet.addRule (c[b], "Behavior:expression (dd_ Belatedpng.fixpng (This))}}},applyvml:function (a) {a.runtimestyle.csstext= "; This.vmlfill (a); This.vmloffsets (A ); This.vmlopacity (a); if (a.isimg) {this.copyimageborders (a)}},attachhandlers:function (i) {var d,c,g,e,b,f;d=this;c ={resize: "Vmloffsets", Move: "Vmloffsets"};if (i.nodename== "A") {e={mouseleave: "Handlepseudohover", MouseEnter: " Handlepseudohover ", Focus:" Handlepseudohover ", Blur:" Handlepseudohover "};for (b in e) {if (E.hasownproperty (b)) {c[b]= E[b]}}}for (f in c) {if (C.hasownproperty (f)) {g=function () {d[c[f]] (i)};i.attachevent ("on" +f,g)}}i.attachevent (" Onpropertychange ", This.readpropertychanGE)},givelayout:function (a) {a.style.zoom=1;if (a.currentstyle.position== "static") {a.style.position= "relative"}} , copyimageborders:function (b) {var c,a;c={borderstyle:true,borderwidth:true,bordercolor:true};for (A in C) {if ( C.hasownproperty (a)) {B.vml.color.shape.style[a]=b.currentstyle[a]}}},vmlfill:function (e) {if (!e.currentStyle) { Return}else{var D,f,g,b,a,c;d=e.currentstyle}for (b in e.vml) {if (E.vml.hasownproperty (b)) {E.vml[b]. Shape.style.zindex=d.zindex}}e.runtimestyle.backgroundcolor= ""; e.runtimestyle.backgroundimage= ""; F=true;if ( d.backgroundimage!= "None" | | E.ISIMG) {if (!e.isimg) {e.vmlbg=d.backgroundimage;e.vmlbg=e.vmlbg.substr (5,e.vmlbg.lastindexof (' ") ')-5)}else{ E.vmlbg=e.src}g=this;if (!G.IMGSIZE[E.VMLBG]) {a=document.createelement ("img"); g.imgsize[e.vmlbg]=a;a.classname= g.ns+ "_sizefinder"; a.runtimestyle.csstext= "Behavior:none; Position:absolute; left:-10000px; top:-10000px; Border:none; margin:0; padding:0; "; C=function () {this.width=this.offsetwidth;this.height=this.offsetheight;g.vmloffsets(e)}; A.attachevent ("onload", c); A.src=e.vmlbg;a.removeattribute ("width"); A.removeattribute ("height"); Document.body.insertBefore (a,document.body.firstchild)}e.vml.image.fill.src=e.vmlbg;f=false} E.vml.image.fill.on=!f;e.vml.image.fill.color= "None"; e.vml.color.shape.style.backgroundcolor=d.backgroundcolor ; e.runtimestyle.backgroundimage= "None"; e.runtimestyle.backgroundcolor= "Transparent"},vmloffsets:function (d) { var H,N,A,E,G,M,F,L,J,I,K;H=D.CURRENTSTYLE;N={W:D.CLIENTWIDTH+1,H:D.CLIENTHEIGHT+1,W:THIS.IMGSIZE[D.VMLBG]. Width,h:this.imgsize[d.vmlbg].height,l:d.offsetleft,t:d.offsettop,blw:d.clientleft,btw:d.clienttop};a= (n.L+ n.blw==1)? 1:0;e=function (b,p,q,c,s,u) {b.coordsize=c+ "," +s;b.coordorigin=u+ "," +u;b.path= "m0,0l" +c+ ", 0l" +c+ "," +s + "L0," +s+ "XE"; b.style.width=c+ "px"; b.style.height=s+ "px"; b.style.left=p+ "px"; b.style.top=q+ "px"};e ( D.vml.color.shape, (n.l+ (D.ISIMG?0:N.BLW)), (n.t+ (D.ISIMG?0:N.BTW)), (N.w-1), (n.h-1), 0); E (D.vml.image.shape, (n.L+ N.BLW), (N.T+N.BTW), (N.W), (N.H), 1); G={x:0,y:0};if (d.isimg) {G.x=parseint (h.paddingleft,10) +1;g.y=parseint (h.paddingtop,10) +1}else{for (J in G) {if (G.hasownproperty (j)) { This.figurepercentage (g,n,j,h["backgroundposition" +j])}}}d.vml.image.fill.position= (G.X/n.W) + "," + (G.Y/n.H); m= H.BACKGROUNDREPEAT;F={T:1,R:N.W+A,B:N.H,L:1+A};L={X:{B1: "L", B2: "R", D: "W"},Y:{B1: "T", B2: "B", D: "H"}};if (m!= " Repeat "| | D.ISIMG) {i={t: (G.Y), R: (G.X+N.W), B: (G.y+n.h), L: (g.x)};if (M.search ("repeat-")!=-1) {k=m.split ("repeat-") [1]. toUpperCase (); I[l[k].b1]=1;i[l[k].b2]=n[l[k].d]}if (i.b>n.h) {i.b=n.h}d.vml.image.shape.style.clip= "rect (" +i. t+ "px" + (i.r+a) + "px" +i.b+ "px" + (i.l+a) + "px"}else{d.vml.image.shape.style.clip= "rect" ("+f.t+" px "+f.r+" px "+f.b+" px "+f.l+" px) "}},figurepercentage:function (d,c,f,a) {var b,e;e=true;b= (f==" X "), switch (a) {case ' left ': Case" Top ":d [f]= 0;break;case "center":d [F]=0.5;break;case "right": Case "Bottom":d [F]=1;break;default:if (A.search ("%")!=-1) {d[f]= parseint (a,10)/100}Else{e=false}}d[f]=math.ceil (e? ( (c[b? ") W ":" H "]*d[f])-(c[b?") W ":" H "]*d[f])):p Arseint (a,10));if(d[f]%2===0) {d[f]++}returnD[f]},fixpng:function(c) {c.style.behavior= "none";varG,b,f,a,d;if(c.nodename== "BODY" | | c.nodename== "TD" | | c.nodename== "TR") {return}c.isimg=false;if(c.nodename== "IMG") {if(C.src.tolowercase (). Search (/\.png$/)!=-1) {c.isimg=true; c.style.visibility= "Hidden"}Else{return}}Else{if(C.currentstyle.backgroundimage.tolowercase (). Search (". png") ==-1) {return}}g=dd_belatedpng;c.vml={color:{},image:{}};b={shape:{},fill:{}}; for(AinchC.VML) {if(C.vml.hasownproperty (a)) { for(dinchb) {if(B.hasownproperty (d)) {f=g.ns+ ":" +d;c.vml[a][d]=document.createelement (f)}} C.vml[a].shape.stroked=false; C.vml[a].shape.appendchild (C.vml[a].fill); C.parentnode.insertbefore (C.vml[a].shape,c)}} C.vml.image.shape.fillcolor= "None"; c.vml.image.fill.type= "Tile"; c.vml.color.fill.on=false; G.attachhandlers (c); G.givelayout (c); G.givelayout (c.offsetparent); c.vmlinitiated=true; G.applyvml (c)}};Try{Document.execcommand ("Backgroundimagecache",false,true)}Catch(r) {}dd_belatedpng.createvmlnamespace ();DD _belatedpng.createvmlstylesheet (); window.onload=function() {Dd_belatedpng.fix (". Pngfix,.pngfix:hover");}

View Code

2. Introduce this JS, add class= "PngFix" on the label that need to be transparent, simple · Convenient Fast!

Such as:

Note: JS Here I commented out, because the front is written into the dd_belatedpng.js inside.

3. It's done!

Advantages:

1. CSS code without any modification, according to the usual thinking to write it;
2. No configuration required;
3. no extra GIF pictures;
4. Support IMG;
5. Support Tiling;
6. Support CSS Sprite;
7. Support hover such as pseudo-class; (You have achieved, please be sure to comment to me what's going on, I did not implement support)

Disadvantages:

1. Added JS file (6.39k) and HTTP request, can be ignored;
2. When a file is loaded, a gray background is temporarily present;
3. JS file Too many times, may be error, resulting in JS can not run normally (this situation rarely appears, can be ignored);

Reference: http://www.cnblogs.com/yjzhu/archive/2012/11/09/2762059.html

IE6 resolving PNG picture transparency issues