PNG图片格式是近年来新兴的一种图片格式，存储色彩多，显示效果逼真，而且图片文件体积也不大，特别是PNG透明图片要比GIF图片显示的更加圆滑和逼真，慢慢的越来越多的网站制作技术人员在使用图片的时候采用PNG图片了。

    随着时代的进步，浏览器也升级的很快，现在大部分人在使用IE8，但是IE6还是有一部分忠实的客户的，这就让网站设计师在做图的时候考虑到每个浏览器版本了。

    我们发现在网页制作过程中PNG图片在IE6下并不是透明的，而是有个灰色的背景，这给网站模板样式带来了极大的视觉影响，该怎么美化他呢，武汉网站建设专家来为您提供几种方法，希望对您有帮助。

    第一种方法，可以采用滤镜的方法，把灰色的区域淡化：

    background:url(0537.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="0537.png" ,sizingMethod="crop");


    用这种方法，可以加载背景图片，让png的图片变成透明的！

    第二种方法，让图层DIV透明

    .div { FILTER: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;}

    在IE6,IE7需给DIV设一个宽度，才可以看到效果。

    第三种方法，使用JS和CSS搭配让PNG图片在IE6下透明：


    <script type="text/javascript" language="javascript"> 
      function enablePngImages() 
      { var imgArr = document.getElementsByTagName("IMG"); 
        for(i=0; i<imgArr.length; i++){    
        if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1)
        {     
          imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + imgArr[i].src + ", sizingMethod=auto)";     
          imgArr[i].src = "spacer.gif";    
        }       
          if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1)
          {     
            var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);
            imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img+", sizingMethod=crop)";     
            imgArr[i].style.backgroundImage = "url(spacer.gif)";    
          } 
        } 
    } 
      function enableBgPngImages(bgElements)
      { 
      for(i=0; i<bgElements.length; i++)
        {    
        if(bgElements[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1)
        {     //alert(bgElements[i]);     
        var img = bgElements[i].currentStyle.backgroundImage.substring(5,bgElements[i].currentStyle.backgroundImage.length-2);     
        bgElements[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img+", sizingMethod=crop)";     
        bgElements[i].style.backgroundImage = "url(spacer.gif)";    
    } 
      } 
      } 
        </script> 
        <img src="pngpic.png" alt="" border="0" /> 
        <!--[if lt IE 7]> 
        <script type=text/javascript> 
        var bgElements; enablePngImages(); if(bgElements){    enableBgPngImages(bgElements); } 
        </script> 
        <![endif]--> 
          
    .pngImg {behavior: url(iepngfix.htc);}


    通过以上三种方法，大家就可以解决IE6下PNG图片显示灰色的问题了，或许再过两年，这种方法已经不用再用了，因为那时候IE出了更高的版本，大家也都不用IE6了。


武汉网站建设：027-87719520