posts - 297,  comments - 1618,  trackbacks - 0

    转载自:http://www.azuresky.com.cn/post/WebJourney-PngTransparentInIE6.php#topreply

   很多朋友在制作网页时都会用到图片透明。使其部分透明的图片后面显示背景部分。
而现在流行的具有透明性的图片有GIF和PNG两种非常普及格式。

GIF(Graphics Interchange Format图像互换格式)可实现图像区域的部分或全局透明。现非常多的网站都将其运用到其中。
但是256色的限制GIF的使用范围。还有一个问题:譬如,当我们的图像边缘有阴影时,保存透明后会发现其边缘不是以渐变式透明显示,而是用灰度色显示而无透明而言。

解决上面GIF的缺陷方案最好方法就是使用现在网络上流行使用的另一种图像格式PNG(Portable Network Graphic Format流式网络图形格式)
但是PNG最大的问题就是,它在IE6下无法显示透明区域(Firefox、Opera、Safari均支持PNG透明),会有一种灰白色代替成为其背景色。这不是PNG这个格式图片的问题,而是IE6的BUG,没有将PNG的Alpha通道打开,造成透明PNG图片的在IE6上显示不出透明区域。

现在就有种方法是通过引入JavaScript的方式解决这个问题。

第一步:
新建一个pngfix.js文件写入以下代码(放在你网页的相同目录下):


var PIXELGIF="pngfix.gif";// 这个是个头1*1像素的透明gif图片,请自行建立并放在你网页的相同目录下

var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
var pngxp=/\.png$/i;
var AlphaPNGfix= "progid:DXImageTransform.Microsoft.AlphaImageLoader";
function fixPNGAll() {
        if(!document.all) return;
        if ((version >= 5.5 && version < 7) && (document.body.filters)) {
          for(var i=0; i<document.images.length; i++) {
                var img = document.images[i];
                if(img.src && pngxp.test(img.src)) {
                  var imgName = img.src;
                  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:" +AlphaPNGfix
                  + "(src='" + img.src + "', sizingMethod='scale');\"></span>";
                  if (img.useMap) {
                        strNewHTML += "<img style=\"position:relative; left:-" + img.width + "px;"
                        + "height:" + img.height + "px;width:" + img.width +"\" "
                        + "src=\"" + PIXELGIF + "\" usemap=\"" + img.useMap
                        + "\" border=\"" + img.border + "\">";
                  }
                  img.outerHTML = strNewHTML;
                  i--;
                }
          }
          /* for type=image png button */
          var kmax = document.forms.length;
          for(var k=0; k<kmax; k++) {
                var fmob = document.forms[k];
                var elmarr = fmob.getElementsByTagName("input");
                var jmax = elmarr.length;
                for(var j=0; j<jmax; j++) {
                        var elmob = elmarr[j];
                        if(elmob && elmob.type=="image" && pngxp.test(elmob.src)) {
                                var origsrc = elmob.src;
                                elmob.src = PIXELGIF;
                                elmob.style.filter = AlphaPNGfix+"(src='" +origsrc +"')";
                        }
                }
          }
        }
}

function fixPNG(img) {
        if(!document.all) return;
        var img;
    if(img && img.src && pngxp.test(img.src)) {
      var imgName = img.src;
      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:" +AlphaPNGfix
      + "(src='" + img.src + "', sizingMethod='scale');\"></span>";
      if (img.useMap) {
        strNewHTML += "<img style=\"position:relative; left:-" + img.width + "px;"
        + "height:" + img.height + "px;width:" + img.width +"\" "
        + "src=\"" + PIXELGIF + "\" usemap=\"" + img.useMap
        + "\" border=\"" + img.border + "\">";
      }
      img.outerHTML = strNewHTML;
    }
}


第二步:
在head标签中引入js文件

<script language="JavaScript" src="pngfix.js"></script>



第三步(分两种情况):
1、指定PNG图片使其在IE6下背景透明
在img标签中加入onload="fixPNG(this)"事件

<img src="Name.png" alt="Name"  onload="fixPNG(this)" />


2、页面内所有PNG图片使其在IE6下背景透明
在body表情中加入onload="fixPNGAll()"事件

<body onload="fixPNGAll()">



需要注意的是:
如果你的网页需要符合XHTML 1.0标准的话,请用第三步中的2方法,因为1方法中img标签中的onload事件是不符合XHTML 1.0标准的

特殊情况(用PNG为button按钮的背景时):
如果你要在input标签的背景中使用PNG图片,此js文件同样适用。

先在head标签中引入js文件

<script language="JavaScript" src="pngfix.js"></script>



在body标签中加入onload="fixPNGAll()"事件

<body onload="fixPNGAll()">


示例

<input type="image" src="Name.png" />



其实还有其他一些方法也能解决PNG图片格式在IE6中背景透明的问题,Tim将下次跟大家共同探讨。

posted on 2008-08-05 11:26 阿蜜果 阅读(3516) 评论(3)  编辑  收藏


FeedBack:
# re: [转]使PNG图片格式在IE6中背景透明(pngfix)
2008-08-31 01:10 | J.wei
学习了呢,刚刚在想这个问题  回复  更多评论
  
# re: 【转】使PNG图片格式在IE6中背景透明(pngfix)
2009-02-17 16:56 | 笑嘻嘻
根本就不行  回复  更多评论
  
# re: 【转】使PNG图片格式在IE6中背景透明(pngfix)
2009-09-03 17:06 | aisinvon
不行啊,不起作用。你自己有没有试过啊  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
<2008年8月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
31123456

      生活将我们磨圆,是为了让我们滚得更远——“圆”来如此。
      我的作品:
      玩转Axure RP  (2015年12月出版)
      

      Power Designer系统分析与建模实战  (2015年7月出版)
      
     Struts2+Hibernate3+Spring2   (2010年5月出版)
     

留言簿(262)

随笔分类

随笔档案

文章分类

相册

关注blog

积分与排名

  • 积分 - 2279407
  • 排名 - 3

最新评论

阅读排行榜

评论排行榜