· [Java论坛][安全论坛][数据库论坛][操作系统论坛]
· [专题] IBM Rational高峰论坛 Windows 7十大功能
· [专题] 史上就危险7月 微软 BizSpark 计划介绍
· [IT技术周刊][IT资源下载专区][病毒求助专区]
· [热点] 我也能做CTO_赛迪连载 赛迪七夕特别行动
· [热点] Chrome 4.0采用V8引擎 Java开发编程规范

JS技巧:在IE浏览器中正确显示PNG透明图片

发布时间:2008.07.01 06:33     来源:赛迪网    作者:korn

PNG图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!

但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。

解决这个的方法是增加javascript。具体方法如下:

把下面的代码放在head区就可以解决问题了。

以下是引用片段:

<script language="javascript"> 
function correctPNG()  
{ 
for(var i=0; i<document.images.length; i++) 
{ 
  var img = document.images[i] 
  var imgName = img.src.toUpperCase() 
  if (imgName.substring(imgName.length-3, imgName.length) == "PNG") 
  { 
   var imgID = (img.id) ? "id='" + img.id + "' " : "" 
   var imgClass = (img.className) ? "class='" + img.className + "' " : "" 
   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " 
   var imgStyle = "display:inline-block;" + img.style.cssText  
   if (img.align == "left") imgStyle = "float:left;" + imgStyle 
   if (img.align == "right") imgStyle = "float:right;" + imgStyle 
   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle   
   var strNewHTML = "<span " + imgID + imgClass + imgTitle 
   + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
   + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"  
   img.outerHTML = strNewHTML 
   i = i-1 
  } 
} 
} 
window.attachEvent("onload", correctPNG); 
 </script>

也可以把这段代码单独加在一张图片上:

以下是引用片段:

<span 
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='male.png',sizingMethod='scale');"></span>

(责任编辑:云子)


[ 发表评论 ] 字体[  ] [ 打印 ] [ 进入博客 ] [ 进入论坛 ]  [ 推荐给朋友 ]
  相关文章
· 新手学堂:rs.open与conn.execute详细解释 (06-30) · 开源框架Hibernate3的新特性以及发展趋势 (06-30)
· Sun预计在年底之前将公开全部Java源代码 (06-27) · 实例解析:PHP程序开发中的中文编码问题 (06-27)
· PHP5程序中新增加日期(date)函数的常量 (06-27) · 使用PHP程序直接调用文本文件的内容实例 (06-27)
· Suse Linux系统下JAVA AWT界面乱码问题 (06-27) · Windows下的PHP5.0安装配制详解 (06-27)
· BluePage通用分页类助开发者提高开发效率 (06-26) · JSP动态网站环境搭建应用中详细步骤介绍 (06-26)
  客户需求反馈表
* 姓  名:
更多资料  了解方案  认识厂商
* 单位名称:
* 联系电话:
* 电子邮件:
资讯 通信 IT产品 IT技术 信息化
专题:扭亏为盈 联想09年Q2翻番
·专题:Tech·Ed 2009微..
·直播:2009互联网大会..
·迅雷搜狐"互搏" 谁动了..
专题:诺基亚危局已现 或重蹈摩托覆辙
·六股势力角逐4G标准 中..
·专题:联通iPhone并不贵..
·专题:排排坐开商店 三..
商务演示需求分析 多媒体会议室必备投影
·VMware在京隆重举行2009..
·专题:笔记本频道10月热..
·专题:学生机市场 惠普 ..
专题:Tech.Ed 2009微软技术大会
·专题:2009 SYBASE 亚太..
·专题:微软新一代桌面操..
·专题:2009年第3届CSDN..