怎么样使网页制作过程中PNG图片在IE6下透明-武汉企盟互联网络公司,www.ceomoo.com

led电子屏租赁

更多 >>led电子屏租赁

怎么样使网页制作过程中PNG图片在IE6下透明

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

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

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

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

    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了。


武汉LED屏:027-87719520
返回列表