如何让页面上的PNG的Alpha透明正常显示

做页面的时候经常会用到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">
 5var 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>




 

Tag标签: WEB,PNG,Alpha,透明
posted on 2008-07-14 16:08 WilliamsQi 阅读(47) 评论(0)  编辑 收藏 所属分类: WEB技术

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

闪存

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      


相关链接:

最新IT新闻:
11个处于悬崖边缘的 Web 公司
扎克博格：Facebook要先赚吆喝后赚钱
金融风暴改写富豪榜排名　巴菲特资产超盖茨
红杉资本发出严重警告：黄金时代已成历史
2008年10月11日科技博客精选
 



CoolCha 库查搜索 查手机号码归属地 查IP地址、火车车次、邮编、在线翻译... 淘星助手