好学IT学院:IT信息技术分享交流平台
来源:互联网  作者:本站整理  发布时间:2010-08-25  ★★★加入收藏〗〖手机版
关于IE6中显示PNG图片不透明问题的解决方案
摘要:下面主要收集整理了两种让IE6显示透明PNG图片的方法,供大家在实际应用的灵活参考(本站顶部的主频道条就是综合应用的效果):…

内容提示:下面主要收集整理了两种让IE6显示透明PNG图片的方法,供大家在实际应用的灵活参考(本站顶部的主频道条就是综合应用的效果):

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

数据中心系统管理员必须了解和遵守的六大铁律
  在复杂的数据中心基础设施中,这种能力可以让你通过丰富的经验和自身的知识快速而准确地发现问题之所在。这种能力只可意会,不可言传。没有…
  • 好学触屏公众号虎力全开、杨帆起航!
  • 好学考试H5触屏版开放内测