png24图片中IE6下的透明度问题 相信对于每个前端开发人员来说并不陌生！PNG(Portable Network Graphics)是W3C推荐的网页图片通用格式，但是Microsoft的IE6以下(IE7已经支持)没有把PNG的Alpha 通道打开，造成透明PNG图片的效果出不来。在Firefox、Opera下显示正常的透明PNG图片，在IE6下浏览时就会带有灰色背景色！我是经常做页面时候碰到这个问题 及谷歌百度了很多次 想找到更好的方法去解决这个问题！当然最常见的有三个方法可以解决这个问题！下面我依次来谈谈那三个方法及优缺点！！！

一：解决IE6下png24背景 可以用.htc格式的文件可以解决！.htc文件可以到网上下载一个 它貌似是IE6的专有属性。但是当我们做页面 做项目时候不是很方便 因为在本地上可以 但是涉及一个问题要上传文件 至于在淘宝系统下还没有上传过 觉得并不是很好！！

二：第二个方法是用css滤镜解决IE6透明，用IE6的hack技术就可以解决！只需要在相应的类下加如下代码：

 
   
    
    
  1. _background：none;_filter：progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/leno.png" ,sizingMethod="noscale");/*IE6透明*/ 
    2. 
   
 
   
src="images/leno.png" 指图片路径！但是用css可以处理IE6 的 PNG24透明问题
 
   
三：用js解决PNG24在IE6下透明度问题：当然也要用IE6下专有的条件注释，这样就不会影响到其他游览器对页面的渲染速度 可能只会对IE6可能会影响点 但是还是很少的！！方法如下：
 
   
 
 
   
 
   
     
    
  1. <!--[if lte IE 6]>  
    2.  
    
  2.  <script type="text/javascript" src="http://xfiles.cdnmyspace.cn/dir/vi/v2/DD_belatedPNG_0.0.8a-min.js"></script>   
    3.  
    
  3.  <script type="text/javascript">   
    4.  
    
  4.         DD_belatedPNG.fix('.test1-t'); //这里写要做透明的class   
    5.  
    
  5.         DD_belatedPNG.fix('.test1-f'); //这里写要做透明的class   
    6.  
    
  6. </script>  
    7.  
    
  7. <![endif]-->  
    8.  
   
 
   
但是有的时候引用上面的js会失效 可能那个src路径找不到 我们最可靠的方面 就是下载那个js代码过来 当然js中的src失效问题不是绝对的！只说有时候而已！我曾经碰到过这种情况 所以我待会会给个js附件放在那 如果需要的话可以下载下来 在本地上引用那个js就ok了！
 
   
 
 
   
下面是我最近看到一个同事用的解决png24的图片在IE6下透明度的最佳方式：
 
   
是用css解决的 用滤镜 但是用滤镜是不能点击的 所以巧妙的用了一张一模一样大的gif空白图片 覆盖着上面 目的是为了解决游览器的点击问题！
 
   
下面是代码：
 
   
 
 
   
 
   
     
    
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2.  
    
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3.  
    
  3. <head> 
    4.  
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5.  
    
  5. <title>无标题文档</title> 
    6.  
    
  6. <style> 
    7.  
    
  7. /* CSS reset */ 
    8.  
    
  8. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; font-size:12px; font-family:"宋体";} 
    9.  
    
  9. table{ border-collapse:collapse; border-spacing:0;} 
    10.  
    
  10. fieldset,img{ border:0; display:block;} 
    11.  
    
  11. address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal; font-weight:normal;} 
    12.  
    
  12. ol,ul{ list-style:none;} 
    13.  
    
  13. caption,th{ text-align:left;} 
    14.  
    
  14. h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;} 
    15.  
    
  15. body{ background:#C60; height:2000px;} 
    16.  
    
  16. .piao{ width:115px; height:498px; overflow:hidden; position:fixed; right:10px;*position:absolute;*top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-498)); top:200px;} 
    17.  
    
  17. html,html body {background-image:url(about:blank);background-attachment:fixed;}  
    18.  
    
  18. .floated{ background:url(images/float.png) no-repeat; width:115px; height:498px; overflow:hidden;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/float.png" ,sizingMethod="noscale");/*IE6透明*/ } 
    19.  
    
  19. </style> 
    20.  
    
  20. </head> 
    21.  
    
  21.  
    22.  
    
  22. <body> 
    23.  
    
  23. <div class="piao"> 
    24.  
    
  24.         <div class="floated"></div> 
    25.  
    
  25.         <img  src="images/float.gif" width="115" height="498" border="0" usemap="#Map" style="position:absolute; top:0; left:0;"/> 
    26.  
    
  26.         <map name="Map" id="Map"> 
    27.  
    
  27.           <area shape="rect" coords="4,129,113,164" href="#"/> 
    28.  
    
  28.           <area shape="rect" coords="3,164,113,197" href="#"/> 
    29.  
    
  29.           <area shape="rect" coords="6,195,111,227" href="#"/> 
    30.  
    
  30.           <area shape="rect" coords="5,228,113,256" href="#"/> 
    31.  
    
  31.           <area shape="rect" coords="4,257,113,284" href="#"/> 
    32.  
    
  32.           <area shape="rect" coords="4,285,111,312" href="#"/> 
    33.  
    
  33.           <area shape="rect" coords="5,310,110,343" href="#"/> 
    34.  
    
  34.           <area shape="rect" coords="5,344,112,375" href="#"/> 
    35.  
    
  35.         </map> 
    36.  
    
  36.   </div> 
    37.  
    
  37. </body> 
    38.  
    
  38. </html> 
    39.  
   
 
   
下面提供附件下载