使IE6下PNG背景透明的七种方法任你选

来源:NB-WEB.COM 所属分类:设计路上 Keywords:Array 日期:2015-05-19 15:44:14

PNG图像格式介绍:

PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG’s Not GIF”,是一种位图文件(bitmap file)存储格式,读成“ping”。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并?#19968;?#21487; 存储多到16位的α通道数据。

IE6下PNG背景透明的显示问题

PNG格式比起GIF来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF格式出色很多,目前,最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明,会显示一个灰色的框。

IE6下PNG背景透明的解决办法


.pngImg { background:url(image.png); _background:url(image.gif);} 
注意上文的_号,目前IE7,8以及Firefox浏览器等都不支持此CSS语法,只有IE6识别。因此,其他浏览器会调用PNG,而IE6刚调用GIF。

二.?#21496;礷ilter解决IE6下背景灰

background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="a.png" ,sizingMethod="crop"); 
上面的原理是其他调用PNG,IE6,则先设背景没有,然后调用?#21496;?#20351;之显示PNG?#35745;?/p>

缺陷:IE6下背景无法平铺,这个问题很?#29616;亍?#21516;时在性能上也有小问题,页面中次数不是很多的时候该办法还是可行的。

AlphaImageLoader?#21496;?#20250;导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加:position: relative;这样条代码,使其相对浮动。AlphaImageLoader无法设置背景的重复,所以对?#35745;?#30340;切图精度会有很高的精确度要求。

解决IE下的链接无效可用最后面的方法:

三.利用JS解决html中的img(插入在网页中的png图像)png背景灰问题

页面中插入一段js即可。原理同上,只是将img标签用标签替换掉,并且通过?#21496;?#35774;置该标签的background。它会将所有插入的PNG都如此处理。
?


四.调用iepngfix.htc解决IE6PNG背景灰及拉伸问题

此方法来自:http://www.twinhelix.com/css/iepngfix/ 此方法基于Winodws平台,在Linux下不支持htc,没有验证过,但有网友发文证实。

以下片段添加至css文件

 

PNG背景?#35745;?/div> \ <script type="text/javascript">     /* EXAMPLE */   DD_belatedPNG.fix(.png_bg);   /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的.trans*/   </script>    
3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名. 
使用a:hover请留意 
5-25 更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景?#35745;?那么你需要留意你的代码,需要以”a:hover”来作为选择器. 否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:
   
七.通过 javascript 和 css ?#21496;到?#20915; IE 整站 png 背景透明问题
<script type="text/javascript" language="javascript"> 
      function enablePngImages() 
      { var imgArr = document.getElementsByTagName("IMG"); 
        for(i=0; 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         {    
        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> 
        \ 
         
          
    .pngImg {behavior: url(iepngfix.htc);} 
以下片段添加至html文件一.IE6使用gif,其他则使用png来解决PNG背景灰

快乐十分开奖结果