png32在ie6中的透明化

关于png24与png32  原文：http://www.irideas.com/?m=201112

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图片在浏览器中正常显示：

?

1 2 3 4 5

#some-element { background : url (image.png); _background : none ; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src= 'image.png' , sizingMethod= 'crop' ); }

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

?

1 2 3 4 5 6 7 8

< div style=" width:400px;height:32px; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src = 'logo.png' , sizingMethod = "image" ); "> < img style=" _filter:progid:DXImageTransform.Microsoft.Alpha( opacity = 0 ); "  src = "logo.png" width = "400" height = "32" /> </ div >

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 标签来把包含它，如：

?

1 2 3 4 5

< v:rect > 　 < v:fill type=”tile” src=”alphatest.png”> 　 　 < div >&nbsp;</ div > 　 </ v:fill > </ v:rect >

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

?

1	< xml:namespace ns=”urn:schemas-microsoft-com:vml” prefix=”v” />

而在你的样式表，你需要：

?

1 2 3 4 5 6 7 8 9 10

v\:rect  { 　 behavior: url ( #defa ult#VML); 　 width : 100px ; 　 height : 100px ; 　 display : block ; }   v\:fill  { 　 behavior: url ( #defa ult#VML); }