IE 6 png背景透明bug的处理

最新推荐文章于 2020-09-19 19:32:44 发布

boral_li

最新推荐文章于 2020-09-19 19:32:44 发布

阅读量6.4k

点赞数

分类专栏：疑难杂症文章标签： ie javascript filter behavior float 图像处理

本文链接：https://blog.csdn.net/boral_li/article/details/4144365

版权

疑难杂症专栏收录该内容

6 篇文章 0 订阅

订阅专栏

PNG(Portable Network Graphics)格式图片可以表现更为绚丽多彩的颜色，常见的一些具有矢量效果的图片、图标都采用png格式，但是具有透明背景的png格式图片在IE6中却不是背景透明的，透明背景部分会显示出#DBEAED的淡灰色，表现效果很糟糕，为了使用透明背景图片只有采用gif格式了，但是gif格式会出现明显的锯齿效果，所以只有设法修复IE6的这个问题。解决的办法就是使用IE的Microsoft.AlphaImageLoader滤镜。

方法一：

IE6与原本支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。对于非动画的GIF可以使用PNG8，同时体积也会更小。但这种办法是以牺牲图片质量为代价的，而且实施也不太容易！

方法二：

如果希望使用png格式图片作为DOM元素的背景，那么就可以使用滤镜来加载png图片

.png{

　　background: url(/angel.png) no-repeat !important;

　　_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/angel.png");

　　background:none;

　　width:100px;

　　height:100px;

HTML代码：

<div class="png">

      背景PNG透明


   
   <div>

以上代码使用了一些IE的Hack，IE7，IE8，Firefox直接应用_background，IE6则会应用filter！

方法三：

如果png格式的图片不是用来做元素背景，而是直接引入的img图像，那么方法二就无法应用了，那么此时可以把此img标签的src属性替换为一张空的透明gif图像，然后再按照方法二把png图片加载为元素的背景就可以了。首先要准备一张空白透明的gif图片，一般命名为blank.gif或space.gif或transparent.gif，然后就可以替换png图像了。但是手工替换不太现实，最好一段代码就解决问题：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>替换png
   
   title>
<style type="text/css">
.mypng img {
azimuth: expression(
    this.pngSet?this.pngSet=true:
           (this.nodeName == "IMG" &&
                   this.src.toLowerCase().indexOf('.png')>-1?
                            (this.runtimeStyle.backgroundImage = "none",
                             this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
                             this.src = "transparent.gif")
                           :(this.origBg = this.origBg?
                                     this.origBg
                                    :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
                                     this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
                                    this.runtimeStyle.backgroundImage = "none")),
           this.pngSet=true);
}


    
    style>

     
     head>

<body>
换成你的png图片
<div class="mypng">
<img src="icon_face_07.png" width="30" height="30" />
<img src="icon_face_10.png" width="30" height="30" />
<img src="icon_face_08.png" width="30" height="30" />

      
      <div>
 
       <body>  
        <html>

以上代码使用了仅IE支持的CSS表达式完成替换与设置滤镜背景的工作。

同样的工作也可以由Javascript来完成：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自动替换png图片</title>
<script language="JavaScript">
function correctPNG(){ // correctly handle PNG transparency in Win IE 5.5 & 6.
    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])
    if ((version >= 5.5) && (document.body.filters)) {
       for(var j=0; j<document.images.length; j++) {
          var img = document.images[j]
          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;
             j = j-1;
          }
       }
    }    
}
if(window.attachEvent)
    window.attachEvent("onload", correctPNG);
</script>
<style type="text/css">
<!--
body {
background-color: #9999CC;
}
-->
</style></head>

<body>
把图片换成你自己的图片
<img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换成你自己的图片 -->
<img src="img/icon_face_05.png" width="30" height="30" />
<img src="img/menu_title_over.png" width="130" height="36" />
</body>
</html>

以上代码采用Javascript遍历页面中的png图像，并实现替换功能！

方法四：

在页面上注入Javascript代码并执行还是不太方便，因此可以把这些Javascript代码封装为htc，并设定浏览器的缺省行为即可实现同样的功能，常用的htc即iepngfix.htc


   
   –[if lte IE 6]>
<style type="text/css">
       img{behavior: url(iepngfix.htc)}

    
    style> 

     
     [endif]–>

以上代码就使用IE的缺省行为behavior属性导入了png图像处理代码iepngfix.htc，不过要修改iepngfix.htc中blank.gif的路径，使其指向正确的空白透明图片！

下载iepngfix.htchttp://www.twinhelix.com/css/iepngfix/iepngfix.zip

iepngfix的缺陷：

1、使用PNG透明背景可能导致该元素内部链接无法点击，尤其在链接具有float属性的时候，如：存在于一个浮动列表中的链接。推荐解决方法：使用display:inline代替float来实现块级元素的的横向排列。

2、img标签的插入的透明PNG图象无法使用右键保存，“另存为”只能取到覆盖在上面的blank.gif，因为原始图片已经被替换为空白图片了！

3、作为背景的PNG图象无法被平铺，无法被定位，即background-repeat默认为no-repeat，而background-position彻底失效。

面对这样的bug，只希望IE6早日走进坟墓成为历史！

boral_li

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
IE 6 png背景透明bug的处理

PNG(Portable Network Graphics)格式图片可以表现更为绚丽多彩的颜色，常见的一些具有矢量效果的图片、图标都采用png格式，但是具有透明背景的png格式图片在IE6中却不是背景透明的，透明背景部分会显示出#DBEAED的淡灰色，表现效果很糟糕，为了使用透明背景图片只有采用gif格式了，但是gif格式会出现明显的锯齿效果，所以只有设法修复IE6的这个问题。解决的办法就
复制链接

扫一扫

专栏目录