收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 33557|回复: 18

[讨论] IE6支持PNG透明(alpha通道)的4种方法

[复制链接]
发表于 2008-9-8 23:17:20 | 显示全部楼层 |阅读模式
想特别说明一下,IE6与生俱来就支持png8的索引色透明度,但不支持png的 alpha 透明度。而我们一直要解决的是让IE6支持PNG的 alpha 透明度。下面我收集整理了4种方法,但都是以滤镜、Js、css 等作为基础模拟还原效果,虽然没有真正的解决alpha透明度问题,但也总算解决了燃眉之急。

    * IE6支持png8透明:

       IE6与生俱来就支持png8的索引色透明度,但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8,因为体积会更小

       测试实例:http://blog.gulu77.com/demo/200809/test_IE6png8/

   1.
      AlphaImageLoader 筛选器
          * 使用简介:在每个标签样式中插入 filterrogidXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
          * 官方原文:http://support.microsoft.com/kb/294714/zh-cn go
          * 测试实例:http://blog.gulu77.com/demo/200809/test_AlphaImageLoader/
   2.
      PNG Transparency in IE
          * 使用简介:相对来说比较简洁,使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度。
          * 官方原文:http://codingforums.com/archive/index.php?t-80555.html go
          * 测试实例:http://blog.gulu77.com/demo/200809/test_PNGTransparncyinIE/
   3.
      IE PNG Fix v1.0 / 2.0 Alpha 2
          * 使用简介:页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。
          * 官方原文:http://www.twinhelix.com/css/iepngfix/ go
          * 测试实例:http://blog.gulu77.com/demo/200809/test_iepngfix/
   4.
      IE7/IE8 JavaScript library
          * 使用简介:ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库,使微软的IE的行为像一个Web标准兼容的浏览器,支持更多的W3C标准。
          * 官方原文:http://code.google.com/p/ie7-js/ go
          * 测试实例:http://blog.gulu77.com/demo/200809/test_ie7-js/

      全部实例打包下载:http://blog.gulu77.com/demo/200809/test_png.rar


源文: [url]http://blog.gulu77.com/?p=147[/url]
发表于 2008-9-9 09:23:00 | 显示全部楼层
我轻易不乱用这东西
回复 支持 反对

使用道具 举报

发表于 2008-9-9 09:28:00 | 显示全部楼层
说说第一条,IE6 的 PNG8 支持其实不是支持 alpha 通道,是通过一个阈值给转成 GIF 那种的 1 位透明模式……
如果 IE6 能支持 8 位以下的,哪怕 4 位以下的 alpha 通道,我想现在都足够用了,应付阴影、圆角之类的常用效果都绰绰有余。
回复 支持 反对

使用道具 举报

发表于 2008-9-9 10:54:00 | 显示全部楼层
背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了

这是致命伤~
回复 支持 反对

使用道具 举报

发表于 2008-9-9 10:59:50 | 显示全部楼层
是的,如果png背景图片在IE6下想平铺是不可能的。
针对IE6还是用条件注释加滤镜的方法好,又快,又能通过验证。
回复 支持 反对

使用道具 举报

发表于 2008-9-10 13:38:27 | 显示全部楼层

太崇拜你们了。

说起理论来一个比一个专业。就是没见一个能给个好的解决方法的。
回复 支持 反对

使用道具 举报

发表于 2008-9-11 09:07:33 | 显示全部楼层
原帖由 [i]along 于 2008-9-10 13:38 发表
说起理论来一个比一个专业。就是没见一个能给个好的解决方法的。

因为基本上无解
回复 支持 反对

使用道具 举报

发表于 2008-10-30 11:25:36 | 显示全部楼层
支持透明我早就知道了,关键是不支持半透明,这个才最让人不爽.
回复 支持 反对

使用道具 举报

发表于 2008-10-30 13:30:57 | 显示全部楼层

回复 5# yoom 的帖子

严重同意5#
回复 支持 反对

使用道具 举报

发表于 2009-2-13 11:11:04 | 显示全部楼层
8楼说的对。
我就遇到这样不爽的事,
IE6个垃圾管快下岗算了
恨死他了
回复 支持 反对

使用道具 举报

发表于 2009-3-2 13:42:36 | 显示全部楼层
怎么没有一个是有用的啊,难道是我IE6有问题,不知道大家有没有测试过
回复 支持 反对

使用道具 举报

发表于 2009-3-3 10:43:58 | 显示全部楼层
这种多通道的大图,实在是太大了,除非是游戏网站那种花哨的风格。其他网站能用GIF的,我会尽量选择使用GIF,甚至直接切一个JPG出来。
回复 支持 反对

使用道具 举报

发表于 2009-4-28 11:52:24 | 显示全部楼层
个人观点:
1.大众使用方法(推荐)
2.JS会遍历所有PNG,如果是不带透明的PNG,也会加上个滤镜,降低客户端执行效率。
3.同上
4.个人觉得没必要为了W3C而W3C,要么你的站就别兼容IE。同样的降低客户端执行效率。
回复 支持 反对

使用道具 举报

发表于 2009-7-2 10:45:05 | 显示全部楼层
利用第二种方法解决了。谢谢。

需要注意的
1、透明替代GIF图片一定要有,路径要正确
2、如果还是看不到效果,在JS里加一个“defer”
回复 支持 反对

使用道具 举报

发表于 2009-7-5 16:38:35 | 显示全部楼层
只问一句话,png做sprites图片在ie6是否可以去灰边?
回复 支持 反对

使用道具 举报

发表于 2009-7-5 21:53:17 | 显示全部楼层

回复 15# weizeyan 的帖子

回复 支持 反对

使用道具 举报

发表于 2009-8-11 10:55:43 | 显示全部楼层
哦!ie6可以透明,也可以半透明,平铺也可以哦。常这么做。看这里:
http://www.imeetyou.net/article.asp?id=321 详解。
回复 支持 反对

使用道具 举报

发表于 2009-8-11 12:24:36 | 显示全部楼层
4种方法其实是不对的。因为所有方法本质上就是两种方法(不算用flash和插件的话):

1. AlphaImageLoader filter
2. VML

filter的问题主要是性能很差,此外有阻挡链接的问题,需要比较复杂的fix。另外filter不会刷新缓存。vml方案也有vml的问题。详见此篇分析:http://bbs.51js.com/viewthread.p ... p;extra=&page=3

摘录结论如下:

除了性能外,VML的优点包括:
1. VML支持透明调色板png,而AlphaImageLoader只支持24位透明。这样就可以使用压缩得更小的png。
2. VML支持tile fill,可以很方便的实现平铺background。
3. VML可以和zoom和平相处,而AlphaImageLoader碰到zoom就可能产生黑边等一塌糊涂的情况。

但是VML也有缺点:
1. VML的gamma校正有问题。虽然IE6本身的gamma校正也有问题,但是VML要更严重。在未手动调整v:image的gamma 前,VML中的效果和所有其他浏览器以及IE本身不同,颜色要更深。可以手动加上了0.55的校正。但是fill元素就不支持gamma属性了,所以如果用fill来实现background,就可能产生颜色偏差。
2. VML的边界有1到2像素的偏差。DD的方案是用复杂的clip来修正的。
3. VML使用局部坐标系统,增加了通用方案的计算负担。
4. VML无法得到图片的大小(我没找到方法,DD也没有)。必须通过HTML创建图片来得到图片大小。
5. 最讨厌的问题:VML有严重的缓存问题。见我06年的记录:http://blog.csdn.net/hax/archive/2006/11/23/1406679.aspx。 AlphaImageLoader其实也有缓存问题,但是是可以找到方法规避的,但是vml的就没办法了(到目前为止我没有找到方案,DD的也没有解决)。可耻的M$在三个组件里的缓存行为居然是三种!这导致无法对图片进行有效客户端缓存,任何一次访问网页,每个图片都会请求服务器。而更要命的是,要修正background,必须计算图片的size,而因为问题4,所以你必须通过html来创建图片。所以,最好的情况是每个图片返回304。而最糟糕的情况是,(在第一次访问时)每个图片产生至少两次200。
回复 支持 反对

使用道具 举报

发表于 2012-3-13 14:15:36 | 显示全部楼层
其实还是比较麻烦
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-7-21 23:55 , Processed in 0.109098 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表