如何在IE6中正常显示透明PNG

最新推荐文章于 2024-09-13 09:10:07 发布

HelloStarnger

最新推荐文章于 2024-09-13 09:10:07 发布

阅读量232

点赞数

分类专栏： css 文章标签： ie filter firefox css javascript 浏览器

本文链接：https://blog.csdn.net/f438952359/article/details/7452227

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

虽然网络上流传着一些使用JavaScript库函数来解决IE6中正常显示透明PNG的问题，但事实上，你没必要这么麻烦。只需要在CSS中加一段简单的代码就可以解决透明PNG在IE6浏览器中的显示问题。

所需工具
任意一款可以编辑CSS文件的文档编辑器

解决方法以及代码
首先，在HTML文档中插入这个png图片（与普通图片插入方式相同）

以下为引用的内容：

以上代码在没有任何修改的情况下可以在IE 7,Safari,Firefox里面正常显示。为了让IE6同样能够正常显示，需要在CSS文档里面加入以下代码：

以下为引用的内容：

#png-container {
width: 300px;
height: 150px;
text-indent: -9999px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='crop');
}

这个filter规则（滤镜规则）是微软IE系列的私有方法（俗称：CSS hack），它迫使IE6来重新解析PNG透明图片的alpha透明效果。

为了保证此Filter能够正常工作，需要遵循以下几条规则：

1.必须将filter用于包含此<img>标签的父（块）级元素容器上，比如这里可以用一个<div>或<P>标签（包含）；而不是将滤镜效果加在<img>本身上。

2.必须为父级容器增加高度（width）和高度（height）属性。

3.必须首先在CSS定义里面将这个png图片“隐藏”起来，所以这里我们使用了text-indent属性为负值。假设你要用一个png做背景图片，你可以使用background: none来代替text-indent.

4.滤镜里面的图片需要用绝对路径，至于为什么，尚不清楚。

5.你可以设置filter的sizingMethod属性为crop,它所起的作用是：当你的图片宽度和高度大小超过其父级元素时，可以隐藏溢出的部分，将图片大小限制在你设置的范围内。也可以设置成scale，意思就是自适应了。

6.假如你将这个png图片采用绝对定位设置在页面其他内容之上，那么用户会无法点击这个图片所覆盖的链接……这是因为filter的作用就是在所有组件的上方重新绘制一层，它会挡住下面各层，于是也就超越了z-index所定义的范围了。

PNG图片色彩丰富而深受很多UI设计者的喜爱，但是在IE下对PNG图片支持得并不是很好，但是在Firefox和Opera浏览器下却是不错的。尤其是IE6下，根本显示不出来PNG透明和半透明的特性来，IE7现在已经支持了。
1、使用Javascript

好处：通吃各种浏览器

代码如下：

< 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
           }
       }
     }
}
window.attachEvent("onload", correctPNG);
< /script>

2、使用CSS滤镜

因为firefox等浏览器是不支持滤镜的，所以写起来会比较复杂。

#div1 {
   height: 600px;
   width: 260px;
   padding: 20px;
   background-repeat: repeat;
}

/* for ie7 ff*/
html>body #div1 {
     background:url(../images/menu1.png) no-repeat;
}
/* for ie6 */
* #div1 {
     background:none;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu1.png', sizingMethod='crop');
}

需要注意的是：AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;这样条代码，使其相对浮动。AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。

3、使用CSS滤镜和hack

html>body .png { background:url(1.png); width:300px; height:100px; border:#000 solid 1px;}

/* ie6 */* html .png { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='1.png'); background:none; width:300px; height:100px; border:#000 solid 1px;}