png32在ie6中的透明化 by irideas

关于png24与png32

PNG图片格式现在包含三种类型:
1.PNG8
2.PNG24
3.PNG32

如果你经常使用Photoshop,那你这里就会问了:到底PNG32是个什么东西。基本上PNG32就是PNG24,但是附带了全alpha通道。就是说每个像素上不仅存储了24位真色彩信息还存储了8位的alpha通道信息,就如同GIF能存储透明和不透明信息一样。当我们把图片放到不太搭配的背景上的时候,透明PNG图片的边缘会显示得更加平滑。

当然,我也知道你的想法,“但是Photoshop也能生成带透明通道的PNG图片!”我也知道,它只是表面上这么说是PNG24,让我也产生困惑了。

作为一个伤感的Fireworks倡导者,我只使用PNG32支持附带alpha通道的真色彩图片。不管怎样,如果你习惯使用Photoshop,你就应该知道,Photoshop在“存储为WEB格式”中只提供PNG8和PNG24两种PNG格式。

我敢肯定你经常会勾选“支持透明”选项,以获得带有透明度的PNG图片,但是这样你就获取了一张PNG32图片。Photoshop只是觉得把PNG32这个名称给隐藏掉了。奇怪吧?……

原文链接

结论:我们常说的PNG24,一般都为PS输出,就是PNG32。

现实中的问题

IE6下PNG8显示为如同GIF图片一样的无变量的透明(例如,来源),PNG32则在原本显示透明背景的地方显示成了灰色(如下图所示)。

使用AlphaImageLoader修复

IE6(及更老版本的IE)提供了一个针对PNG图片显示的解决方案,通过其私有CSS滤镜。
以下代码可使PNG图片在浏览器中正常显示:

部分场景下我们也可这么用
仍然使用img/做前景图展现。使用hack对IE6做降级处理,使其背景图使用滤镜,前景图透明度为0

AlphaImageLoader的中文说明

在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。
如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。

语法:

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled: 可选项。布尔值(Boolean) true/false。设置或检索滤镜是否激活。
true:默认值。滤镜激活。
false:滤镜被禁止。

sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop:剪切图片以适应对象尺寸。
image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale:缩放图片以适应对象的尺寸边界。

src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

src 参数,路径相对于web页,即使filter是被定义在特定的css文件中,故建议使用绝对路径

msdn:http://msdn.microsoft.com/en-us/library/ms532969.aspx

一些不常见的问题

  • 浏览器假死
  • 使用更多的内存 前两条可见此处
  • 部分系统中IE6不支持滤镜 背景图将不被展现(原因还不明)

一些小技巧

  • 背景图做到持久缓存
  • 可优先预加载背景图片

使用VML

使用VML是另一种在IE中使PNG32透明的方法,它解决了几个问题:Alpha透明,性能和背景重复。可惜的是,它使用了非标准标签(也可用JavaScript来生成,如果你希望你的初始标签清爽)和私有CSS。这里有一个如何实现它的例子。

例如,你有一个 的DIV,你需要用VML的 :rect (或 :shape) 和 :fill 标签来把包含它,如:

某些标签之前,你还需要声明VML命名空间:

而在你的样式表,你需要:

点这里查看原文: http://www.irideas.com/?p=18

关于 “png32在ie6中的透明化 by irideas” 的 2 个意见

评论关闭。