网页PNG透明支持

网页PNG透明支持(IE6、IE7、firefox下测试通过)
IE6不支持PNG半透明图片的缺陷为web设计带来了极大的不便，之前曾经介绍过用滤镜+hack的方法实现显示PNG，不过实现起来相当繁琐。还有一种网上比较流行的方法，更加简便，下面详细介绍这种方法：


把以下代码保存为correctpng.js 
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
   };
   };
};


if(navigator.userAgent.indexOf("MSIE")>-1)
{
window.attachEvent("onload", correctPNG);
};


在网页的头部引用一下 <SCRIPT language=JavaScript src="correctpng.js" type=text/javascript></SCRIPT>
使用的时候直接用img标签即可。


******************************************************************************************


方法一、通过 css 和 IE 专有属性 behavior 解决整站 png 背景透明问题


<style type="text/css">
<!--
img { behavior:url(/iepngfix.htc); }
-->
</style>


htc文件内容


<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />
<script type="text/javascript">
// IE5.5+ PNG Alpha Fix v1.0RC3
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com
// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
// This must be a path to a blank image. That's all the configuration you need.
var blankImg = '/spacer.gif';
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
function filt(s,m)
 {
 if (filters[f])
  {
    filters[f].enabled = s ? true : false;
    if (s) with (filters[f])
   {
   src = s;
   sizingMethod = m;
   }
   }
  else if (s)
  {
  style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
  }
 }
function doFix()
 {
 // Assume IE7 is OK
 if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) || (event && !/(background|src)/.test(event.propertyName)))
  {
  return;
  }
 var bgImg = currentStyle.backgroundImage || style.backgroundImage;
 if (tagName == 'IMG')
  {
  if ((/\.png$/i).test(src))
   {
   // this tests to see if the image has already been replaced once before
   if (src.indexOf('?repurl=') == -1)
    {
    if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
        {
     style.width = offsetWidth+'px';
     }
    filt(src,'scale');
    src = blankImg+'?repurl='+src;
    }
   }
  else if (src.indexOf(blankImg) < 0)
   {
   filt();
   }
  }
 else if (bgImg && bgImg != 'none')
  {
    if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
     {
     var s = RegExp.$1;
     if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
       {
    style.width = offsetWidth+'px';
    }
     style.backgroundImage = 'none';
     filt(s,'crop');
     // IE link fix
     for (var n=0;n<childNodes.length;n++)
    {
    if (childNodes[n].style) { childNodes[n].style.position = 'relative'};
    }
     }
  else filt();
  }
 }
doFix();
</script>
</public:component>


方法二、通过 css ie滤镜解决
<style type="text/css">
<!--
.pngpic { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/pngpic.png',sizingMethod='crop'); }
-->
</style>


方法三、通过 javascript 和 css 滤镜解决 IE 整站 png 背景透明问题
<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]-->


********************************************************************************************


目前大部分浏览器对PNG的支持并不完善,IE虽然可以显示PNG图片，但如果PNG图片中含有透明部分，那么透明部分的显示就不正常了。


解决这个问题大致有以下方法(其原理都是通过AlphaImageLoader滤镜来解决)。


方法一:


<div style="filter:progidXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png);width:200px;height:50px"> </div>


点评:这种方法虽然较好的解决了IE 5+的浏览器，但却得本来能正常显示透明PNG图片的FireFox无法正常显示!


方法二:


<script type="text/javascript"> 
// PNG纠正控件 1.0 For IE 5.5或更高. 
// 作者:舜子


function isIE(){ 
if (navigator.appName!="Microsoft Internet Explorer" {return false} 
return true 
}


function correctPNG() 
{ 
for(var i=0; i <document.images.length; i++) 
{ 
var img = document.images 
var LW=img.width 
var LH=img.height 
var imgName = img.src.toUpperCase() 
if (imgName.substring(imgName.length-3, imgName.length) == "NG" 
{ 
img.style.filter+="progidXImageTransform.Microsoft.AlphaImageLoader(src="+img.src+", sizingmethod=scale);" 
img.src="/images/transparent.gif"//transparent.gif为1px*1px的透明gif图片 
img.width=LW 
img.height=LH 
} 
} 
} 
if (isIE()) {window.attachEvent("onload", correctPNG);} 
</script>




点评:这种方法确实能解决这个问题，但是如果不是在本地调试，通常需要一段时间的转换!




方法三:


<div id="header"> <!--此DIV为需要插入PNG图片的区域--> 
<script type="text/javascript"> 
if (navigator.appName!="Microsoft Internet Explorer" { 
document.write(" <img src=\"/images/header.png\" width=\"200\" height=\"50\" alt=\"站长吧 Master8.NET\" />"; 
} else { 
document.write(" <img style=\"filter:progidXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale);width:200px;height:50px;\" src=\"{$rootpath}/images/transparent.gif\" width=\"200\" height=\"50\" alt=\"站长吧 Master8.NET\" />"; 
} 
</script> 
<div> 
点评:事实上网页中绝对需要使用透明PNG图片的地方并不多，所以如果你的网页中仅仅是一两处使用透明PNG图片，建议用这种方法。


如果浏览者禁用了js,方法二和三当然失去了作用。针对方法三，可以做一些完善:


<div id="header"> 
<div id="Index_header">图片简要说明,正常浏览本站请不要禁用js </div> 
<div>


<script type="text/javascript"> 
if (navigator.appName!="Microsoft Internet Explorer") { 
document.getElementById('logo').innerHTML=" <img src=\"/images/header.png\" width=\"200\" height=\"50\" alt=\"站长吧 Master8.NET\" />" 
} else { 
document.getElementById('logo').innerHTML=" <img style=\"filter:progidXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale);width:200px;height:50px;\" src=\"/images/transparent.gif\" width=\"200\" height=\"50\" alt=\"站长吧 Master8.NET\" />" 
} 
</script>