成都计算机培训 网络报名 Java软件开发培训课程 朗沃成都软件Java培训中心师资介绍 成都软件培训学校开班信息 朗沃成都Java软件开发培训学校学员就业情况 Java朗沃成都软件培训中心在线咨询
成都朗沃教育课程升级啦！
□ 您现在的位置：首页> 学员天地> web编程> 正文

让PNG在IE浏览器中背景透明化

朗沃IT教育 成都软件工程师培训中心　时间：　点击率：
朗沃成都软件培训学校在线咨询 　　　　　　　　朗沃成都软件培训学校在线报名

关键词：JavaScript  JS技巧

　　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.AlphaImageLoade (src=''male.png'',sizingMethod=''scale'');"><span>

朗沃成都软件培训学校在线咨询 　　　　　　　　朗沃成都软件培训学校在线报名
作者： 朗沃IT教育 成都中心
原载：朗沃IT教育 成都中心 lovoinfo.com
版权所有，转载时必须以链接形式注明作者和原始出处及本声明
在线客服
在线客服系统