PNG背景透明问题

方法一、通过 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]-->