<!-- http://www.iefans.net/ie8-filteralpha-png-touming/
IE8里可以這樣寫 -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=50)”;
IE7里可以這樣寫 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
IE6,IE7,IE8里都可以這樣寫 filter:alpha(opacity=50)
-->
from:http://unc0pyrightable.blog.163.com/blog/static/1313300602010021526561/
今天推薦一個最完美讓ie6支持png透明的js,為什么說它最完美呢？
只因為它支持background-position和background-repeat
這是市面上的其它方法比不上的
首先,要在網頁中引用js
<!--[if IE 6]>
<script src="http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->
上面那個js路徑是絕對路徑,大家最好還是把它下下來,以防網站掛了.
引用之后就是更改第二個<script>里的.png為你要實現效果的選擇器.
就比如,你#header引用了一個background,那你上面就要改為:
DD_belatedPNG.fix('#header');
并且它還支持組選擇器,如:
DD_belatedPNG.fix('#header,h1,h2,h3,#content');
很簡單吧,只要把有透明png的標簽或選擇器寫在里面就行
至于這里面能不能支持css3就不得而知了.
官網:http://www.dillerdesign.com/experiment/DD_belatedPNG/
這個JS內容（DD_belatedPNG_0.0.8a-min.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
**/
var DD_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 () {
var b,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 () {
var b,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(a in b.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])):parseInt(a,10));
if(d[f]%2===0) {
d[f]++
}return d[f]
},fixPng:function (c) {
c.style.behavior="none";
var g,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(a in c.vml) {
if(c.vml.hasOwnProperty (a)) {
for(d in b) {
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();
或者：
讓IE6支持PNG格式的圖片
用法：
先復制下面的代碼在記事本中，然后另存為pngbehavior.htc（名字可以任意）：
<public:componentlightWeight="true">
<public:attach event="onpropertychange"onevent="propertyChanged()" />
<public:attach event="onbeforeprint"onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint"onevent="afterPrint()" for="window"/>
<script>
var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent)&&
navigator.platform== "Win32";
var realSrc;
var blankSrc = "blank.gif";
var isPrinting = false;
if (supported) fixImage();
function propertyChanged() {
if (!supported || isPrinting) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if (!new RegExp(blankSrc).test(src))
fixImage();
};
function fixImage() {
// get src
var src = element.src;
// check for real change
if (src == realSrc&& /\.png$/i.test(src)) {
element.src =blankSrc;
return;
}
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if (/\.png$/i.test(realSrc)) {
// set blank image
element.src =blankSrc;
// set filter
element.runtimeStyle.filter= "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='"+ src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter= "";
}
}
function beforePrint() {
isPrinting = true;
element.src = realSrc;
element.runtimeStyle.filter = "";
realSrc = null;
}
function afterPrint() {
isPrinting = false;
fixImage();
}
</script>
</public:component>
最后在你的css文件里面加上這么一段代碼：
img {
behavior: url("pngbehavior.htc");
}