做页面的时候经常会用到PNG文件，因为是矢量图，比GIF具有更好的画面质量。
不过在使用PNG的时候如果使用背景的Alpha透明的话，有时会让背景变成灰白色，实现不了透明的效果。
下面这段代码就是通过CSS控制，让PNG的透明背景真正成为透明。
具体做法是将下面这段代码保存为.htc文件，然后在使用PNG的页面中的加入
<style>
.png {behavior:url(htc文件的路径)}
</style>
进行引用即可
1
<public:component>
2<public:property name="alpha" />
3<public:property name="dummy" />
4<script type="text/javascript">
5
var propertychange=readystatechange=function(){};
6var dummy=null;
7if((element.tagName=='IMG')&&(typeof document.all!='undefined')&&(typeof document.getElementById!='undefined')&&(navigator.platform=='Win32')){
8
readystatechange=function(){
9 if((element.readyState=='loading')||(element.readyState=='complete')){
10 if((element.alpha!=0)||((element.alpha==null)&&(element.src.substr(-4)=='.png'))){
11 element.alpha=1;
12 if(!dummy){
13 dummy=document.createElement('div');
14 element.parentNode.insertBefore(dummy,element);
15 dummy.runtimeStyle.position ='absolute';
16 dummy.runtimeStyle.zIndex =element.currentStyle.zIndex;
17 element.runtimeStyle.zIndex =element.currentStyle.zIndex+1;
18 dummy.runtimeStyle.filter =element.currentStyle.filter+"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+element.src+"',sizingmethod=scale)";
19 element.runtimeStyle.filter =element.currentStyle.filter+"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
20
}
21 dummy.runtimeStyle.width=element.offsetWidth+"px";
22 dummy.runtimeStyle.height=element.offsetHeight+"px";
23 dummy.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=element.src;
24 }
25 }
26 }
27 propertychange=function(){
28 if(!dummy||(event.propertyName=='dummy'))return;
29 dummy[event.propertyName]=element[event.propertyName];
30 dummy.runtimeStyle.width=element.offsetWidth+"px";
31 dummy.runtimeStyle.height=element.offsetHeight+"px";
32 dummy.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=element.src;
33 dummy.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").enabled=element.alpha;
34 element.filters.item("DXImageTransform.Microsoft.Alpha").enabled=element.alpha!=0;
35 }
36}
37</script>
38<public:attach event="onpropertychange" onevent="propertychange()" />
39<public:attach event="onreadystatechange" onevent="readystatechange()" />
40</public:component>
<public:component>2
<public:property name="alpha" />3
<public:property name="dummy" />4
<script type="text/javascript">5
var propertychange=readystatechange=function(){};
var propertychange=readystatechange=function()
}6
var dummy=null;7
if((element.tagName=='IMG')&&(typeof document.all!='undefined')&&(typeof document.getElementById!='undefined')&&(navigator.platform=='Win32')){8
readystatechange=function(){9
if((element.readyState=='loading')||(element.readyState=='complete')){10
if((element.alpha!=0)||((element.alpha==null)&&(element.src.substr(-4)=='.png'))){11
element.alpha=1;12
if(!dummy){13
dummy=document.createElement('div');14
element.parentNode.insertBefore(dummy,element);15
dummy.runtimeStyle.position ='absolute';16
dummy.runtimeStyle.zIndex =element.currentStyle.zIndex;17
element.runtimeStyle.zIndex =element.currentStyle.zIndex+1;18
dummy.runtimeStyle.filter =element.currentStyle.filter+"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+element.src+"',sizingmethod=scale)";19
element.runtimeStyle.filter =element.currentStyle.filter+"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";20
}21
dummy.runtimeStyle.width=element.offsetWidth+"px";22
dummy.runtimeStyle.height=element.offsetHeight+"px";23
dummy.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=element.src;24
}25
}26
}27
propertychange=function(){28
if(!dummy||(event.propertyName=='dummy'))return;29
dummy[event.propertyName]=element[event.propertyName];30
dummy.runtimeStyle.width=element.offsetWidth+"px";31
dummy.runtimeStyle.height=element.offsetHeight+"px";32
dummy.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=element.src;33
dummy.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").enabled=element.alpha;34
element.filters.item("DXImageTransform.Microsoft.Alpha").enabled=element.alpha!=0;35
}36
}37
</script>38
<public:attach event="onpropertychange" onevent="propertychange()" />39
<public:attach event="onreadystatechange" onevent="readystatechange()" />40
</public:component>
