【分享】你还在为IE6 不支持 PNG24 格式图片的半透明效果而烦恼吗?
透明透明
透明，在设计里可以实现比较漂亮的效果，可以让你的页面有一种立体感，朦胧感。关于透明的实现可以使用CSS和IE的filer来完成，但，对于一个图片不同部位不同的透明度就不好实现了，这是就要借助图片来实现了。
我们知道，png是无损压缩，而且对透明支持的很好。所以，一般都会选择此格式的图片来展示透明效果。PNG24 格式图片可以携带 Alpha 半透明通道，以便呈现从透明到不透明间过渡色彩效果，但是用此种图片的问题在于： IE6 不支持这种格式原有的透明特性，而且带有半透明通道的 PNG24 格式图片在 IE6 中通道颜色被显示成灰色，不具有半透明效果。
例子
- HTML code
-
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 </head>
6 <body style="background-color:yellow;">
7 <h3>透明背景的 PNG8 格式图片</h3>
8 <img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png8.png"/>
9
10 <h3>具有半透明过度背景的 PNG24 格式图片</h3>
11 <img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png24_alpha.png"/>
12
13 <h3>没有透明效果的 PNG24 格式图片</h3>
14 <img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png24_no_alpha.png"/>
15 </body>
16 </html> - 效果比较图：
可见
IE6 浏览器在处理带有半透明通道的 PNG24 格式图片时，错误的将半透明通道渲染成灰色。
解决 - HTML code
-
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <script type="text/javascript">
6 function fixpng24() {
7 var arVersion = navigator.appVersion.split("MSIE");
8 var version = parseFloat(arVersion[1]);
9 if ((version >=5.5) && (document.body.filters)) {
10 for (var i =0; i < document.images.length; i++) {
11 var img = document.images[i];
12 var imgName = img.src.toUpperCase();
13 if (imgName.substring(imgName.length -3, imgName.length) =="PNG") {
14 var imgID = (img.id) ?"id='"+ img.id +"' " : "";
15 var imgClass = (img.className) ?"class='"+ img.className +"' " : "";
16 var imgTitle = (img.title) ?"title='"+ img.title +"' " : "title='"+ img.alt +"' ";
17 var imgStyle ="display:inline-block;"+ img.style.cssText;
18 if (img.align =="left") imgStyle ="float:left;"+ imgStyle;
19 if (img.align =="right") imgStyle ="float:right;"+ imgStyle;
20 if (img.parentElement.href) imgStyle ="cursor:hand;"+ imgStyle;
21 var strNewHTML ="<span "+ imgID + imgClass + imgTitle
22 +" style=\""+"width:"+ img.width +"px; height:"+ img.height +"px;"+ imgStyle
23 +"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
24 +"(src=\'"+ img.src +"\', sizingMethod='scale');\"></span>"
25 img.outerHTML = strNewHTML;
26 i = i -1;
27 }
28 }
29 }
30 }
31 window.onload=function(){
32 fixpng24();
33 }
34 </script>
35 </head>
36 <body style="background-color:yellow;">
37 <br/>透明背景的 PNG8 格式图片<br/>
38 <img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png8.png"/>
39
40 <br/>具有半透明过度背景的 PNG24 格式图片<br/>
41 <img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png24_alpha.png"/>
42
43 <br/>没有透明效果的 PNG24 格式图片<br/>
44 <img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png24_no_alpha.png"/>
45 </body>
46 </html> - 关键是批量处理的那个函数 fixpng24()。
原文地址
http://www.w3help.org/zh-cn/causes/HO3004
