5,006
社区成员
发帖
与我相关
我的任务
分享【分享】你还在为IE6 不支持 PNG24 格式图片的半透明效果而烦恼吗？
问题
烦恼的原因，IE6 不支持 PNG24 格式图片的半透明效果，答http://topic.csdn.net/u/20100902/13 /8bc405a1-2814-4ddc-b9d7-b697430d84c0.html?97270帖子问。
透明透明
透明，在设计里可以实现比较漂亮的效果，可以让你的页面有一种立体感，朦胧感。关于透明的实现可以使用CSS和IE的filer来完成，但，对于一个图片不同部位不同的透明度就不好实现了，这是就要借助图片来实现了。
我们知道，png是无损压缩，而且对透明支持的很好。所以，一般都会选择此格式的图片来展示透明效果。PNG24 格式图片可以携带 Alpha 半透明通道，以便呈现从透明到不透明间过渡色彩效果，但是用此种图片的问题在于： IE6 不支持这种格式原有的透明特性，而且带有半透明通道的 PNG24 格式图片在 IE6 中通道颜色被显示成灰色，不具有半透明效果。
例子
可见
IE6 浏览器在处理带有半透明通道的 PNG24 格式图片时，错误的将半透明通道渲染成灰色。
解决
原文地址
http://www.w3help.org/zh-cn/causes/HO3004
更多兼容性问题：
【分享】浏览器兼容性问题目录
烦恼的原因，IE6 不支持 PNG24 格式图片的半透明效果，答http://topic.csdn.net/u/20100902/13 /8bc405a1-2814-4ddc-b9d7-b697430d84c0.html?97270帖子问。
透明透明
透明，在设计里可以实现比较漂亮的效果，可以让你的页面有一种立体感，朦胧感。关于透明的实现可以使用CSS和IE的filer来完成，但，对于一个图片不同部位不同的透明度就不好实现了，这是就要借助图片来实现了。
我们知道，png是无损压缩，而且对透明支持的很好。所以，一般都会选择此格式的图片来展示透明效果。PNG24 格式图片可以携带 Alpha 半透明通道，以便呈现从透明到不透明间过渡色彩效果，但是用此种图片的问题在于： IE6 不支持这种格式原有的透明特性，而且带有半透明通道的 PNG24 格式图片在 IE6 中通道颜色被显示成灰色，不具有半透明效果。
例子
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body style="background-color:yellow;">
<h3>透明背景的 PNG8 格式图片</h3>
<img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png8.png"/>
<h3>具有半透明过度背景的 PNG24 格式图片</h3>
<img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png24_alpha.png"/>
<h3>没有透明效果的 PNG24 格式图片</h3>
<img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png24_no_alpha.png"/>
</body>
</html>可见
IE6 浏览器在处理带有半透明通道的 PNG24 格式图片时，错误的将半透明通道渲染成灰色。
解决
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function fixpng24() {
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) == "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;
i = i - 1;
}
}
}
}
window.onload=function(){
fixpng24();
}
</script>
</head>
<body style="background-color:yellow;">
<br/>透明背景的 PNG8 格式图片<br/>
<img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png8.png"/>
<br/>具有半透明过度背景的 PNG24 格式图片<br/>
<img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png24_alpha.png"/>
<br/>没有透明效果的 PNG24 格式图片<br/>
<img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png24_no_alpha.png"/>
</body>
</html>原文地址
http://www.w3help.org/zh-cn/causes/HO3004
更多兼容性问题：
【分享】浏览器兼容性问题目录
...全文
请发表友善的回复…
发表回复
gaowenzhen 2012-02-05
- 打赏
- 举报
我要疯
焦sir 2012-01-04
- 打赏
- 举报
忽略IE6....
Angel520shuyi 2011-12-31
- 打赏
- 举报
楼主，这是解决了IE6插入半透明图片的问题，不过问题又出现了，加上你这段代码后，png8和png24的图片，border 就没有了，即使定义了border，也没有显示出来！希望楼主修改修改！给个可以解决的办法！
网络游 2011-12-11
- 打赏
- 举报
确实不错啊，解决了浏览器兼容问题
yaaron 2011-12-09
- 打赏
- 举报
建议使用http://code.google.com/p/ie7-js/. 使用前先设置png文件名match的pattern。注意如果在IE9下使用了opacity反而会有问题。
svgr110 2011-11-27
- 打赏
- 举报
太牛叉了
咖啡加奶昔 2011-11-22
- 打赏
- 举报
试了不行
句子句子 2011-10-31
- 打赏
- 举报
楼主的方法是针对插入PNG图片形式的，
有木有可以针对PNG背景的代码呢？（滤镜除外）
有木有可以针对PNG背景的代码呢？（滤镜除外）
kulapika__ 2011-09-22
- 打赏
- 举报
非常感谢，你的帖子解决了我的问题，网上解决png透明的很多，都他妈的不好使，你这个好使，太棒了
宏尘 2011-05-26
- 打赏
- 举报
[Quote=引用 89 楼 liu504785352 的回复:]
兄弟你的技术真的太牛了 我也有一招 拿出来分享一下 为大家添加一个处理图片透明的方法
对于PNG火狐和IE8全支持 所以我们可以单独的为IE6设置一个样式 仅仅让IE6适用
代码：
*html .show{ height:69px; width:906px; background:url(images/puhei.png) repeat-x left top !important;filt……
[/Quote]
楼主的方法是一种解决办法，不过相比89楼的这种方法。89楼的主法还是更简单，实用一点哈。
兄弟你的技术真的太牛了 我也有一招 拿出来分享一下 为大家添加一个处理图片透明的方法
对于PNG火狐和IE8全支持 所以我们可以单独的为IE6设置一个样式 仅仅让IE6适用
代码：
*html .show{ height:69px; width:906px; background:url(images/puhei.png) repeat-x left top !important;filt……
[/Quote]
楼主的方法是一种解决办法，不过相比89楼的这种方法。89楼的主法还是更简单，实用一点哈。
markpeter77 2011-05-14
- 打赏
- 举报
ie6是前台永远的痛啊，为什么还有人用它呢？
透明png的问题困扰大家很久了，哈哈 感谢分享经验
透明png的问题困扰大家很久了，哈哈 感谢分享经验
PrecisionSoft 2011-05-13
- 打赏
- 举报
嗯，很给力，支持楼主！
alian_muaic 2011-05-11
- 打赏
- 举报
好东西，谢谢分享啊。
中远 2011-05-08
- 打赏
- 举报
以后改用png8看看
荒牧 2011-04-12
- 打赏
- 举报
ietester 不标准
阿库拉姆 2011-04-11
- 打赏
- 举报
为什么我用ietester 的ie6 显示不支持此接口= =
liu504785352 2011-02-27
- 打赏
- 举报
兄弟你的技术真的太牛了 我也有一招 拿出来分享一下 为大家添加一个处理图片透明的方法
对于PNG火狐和IE8全支持 所以我们可以单独的为IE6设置一个样式 仅仅让IE6适用
代码：
*html .show{ height:69px; width:906px; background:url(images/puhei.png) repeat-x left top !important;filter:alpha(opacity=50) !important;position:absolute; left:0px; bottom:18px;}<!--这是为了兼容IE6下面的透明渐变的样式-->
对于PNG火狐和IE8全支持 所以我们可以单独的为IE6设置一个样式 仅仅让IE6适用
代码：
*html .show{ height:69px; width:906px; background:url(images/puhei.png) repeat-x left top !important;filter:alpha(opacity=50) !important;position:absolute; left:0px; bottom:18px;}<!--这是为了兼容IE6下面的透明渐变的样式-->
zzx1983422 2010-10-28
- 打赏
- 举报
瞻仰一下高手~
fuhao1668 2010-10-06
- 打赏
- 举报
不错，顶一个
i11111 2010-10-06
- 打赏
- 举报
是哦,背景好象不行...
加载更多回复（75）
