IE6中如何解决PNG图片 Alpha透明(全集)

ie7,fireofx,opera,及至webkit内核的chrome ,safari..... 这些浏览器均支持png的Alpha透明。
很多人说IE6不支持PNG透明，其实IE支持100%透明的PNG，疯狂的IE6只是不支持png的Alpha透明。
这个BUG给我们带来了很大的困扰。
但是这仍然存在很多问题，比如半透明的PNG背景图片。
Gulu77整理了4种IE6中PNG Alpha透明的方法：
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html
这里用IE6测试，插入的图片和背景图片没有透明。

第一种方法：AlphaImageLoader 筛选器
微软给出了一个解决方案：http://support.microsoft.com/kb/294714/zh-cn

使用简介：在每个标签样式中插入 filter:progidXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
注意事项:
AlphaImageLoader难以实现插入图片<img src=".png"/>透明
AlphaImageLoader方法用于背景图片上,实现background-image的效果
AlphaImageLoader IE8不支持
因为IE7支持AlphaImageLoader,避免冲突建议使用CSS hack区分开,只针对IE6使用
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html

第二种方法：PNG Transparency in IE
使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度
注意事项:
根目录的spacer.gif透明图片作为png图片的替换,写在JavaScript中的spacer.gif路径根据需要调整
PNGTransparncyinIE方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了
官方原文：http://codingforums.com/archive/index.php?t-80555.html
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html

第三种方法：IE PNG Fix v1.0 / 2.0 Alpha 3
这是目前最新版本，今天重点介绍的一个方法。
使用简介：页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。
测试实例1：http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
测试实例2（官方，e文）：http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html

还有第4种方法是我极力推荐的，因为使用起来比较方便，直接把以下代码加入到你的页面或者调用都可以。


程序代码

<!--[if lt IE 7]>  
<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 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) == "NG")  
{  
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:progidXImageTransform.Microsoft.AlphaImageLoader"  
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"  
img.outerHTML = strNewHTML  
i = i-1  
}  
}  
}  
}  
window.attachEvent("onload", correctPNG);  
</script>  
<![endif]-->  



这段代码只在Internet Explorer 6中才会被运行。
下面我们可以像在Internet Explorer 7 和Firefox中一样写代码：


程序代码

<div><img src="filter.png" alt="图片说明" /></div>




程序代码

div {  
      background:url(logo.jpg) no-repeat;  
}  


解决了PNG跨浏览器的问题之后，我们可以利用它来实现更加复杂和更加绚丽的页面效果。

[发帖际遇]: aleilei买水果，老板多找了金钱10文理币.

[发帖际遇]: aleilei买水果，老板多找了金钱10文理币.

我最近接了一私活，作了一个类似的效果

是背景透明，，兼容IE6 IE7 IE8 FF  OP  STAR

我使用的你说的第一种方式，当时研究了7个小时，选择适合的做法，时间太长脑子有点乱，CSS写的有嗲复杂和废代码。因为写XHTML  能不用JS实现就不用JS实现，
附件传不上去、、、、、
给测试地址，如果版主感觉不错，可以下载下来
www.02954.com/beifen/index.html

特来学习