解决ie6下png不透明，出现灰色背景的问题

png图片不透明分两种：

第一种：通过css的background属性引入的png背景图片

解决思路：

      1.只需要png背景的元素css中添加微软特有的滤镜就可以了。

      2.span{

background:url('../image.png') no-repeat left top;  

_background: none;

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop',src='图片路径');

}

       3.此图片路径若为相对路径，则是html文件的相对路径，而不是css文件的相对路径。也可以使用绝对路径。

第二种：在html页面中通过img插入的图片

解决思路：

1.引入下面的js文件即可

         <!--[if IE 6]> 

<script>

 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> 

             <![endif]-->

           2.上面的js代码的意思：在ie6浏览器中，用span替代img，将img的src路径转换成span的内联样式filter滤镜src，设置span为display:inline-block,将span的宽高设置成img的width,height，通过sizingMethod='scale'控制图片的显示的大小。

           3.sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

 crop : 剪切图片以适应对象尺寸。
      image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
 scale : 缩放图片以适应对象的尺寸边界。

       
例子：比如<div>资源配置</div>通过css的background属性引入小三角形png图片。

           使用 sizingMethod=‘crop’，图像文字都能正常显示

   使用 sizingMethod=‘scale’，文字能正常显示，图片被放大占满整个div

   使用 sizingMethod=‘image’，图片能正常显示，文字不显示

           如图所示：     

  

转载地址：

<a href="http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html">http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html</a>

        <a href="http://wenku.baidu.com/view/77ceb31efc4ffe473368aba3.html">http://wenku.baidu.com/view/77ceb31efc4ffe473368aba3.html</a>