PNG32 透明问题(1)

 

一.  索引透明，布尔透明，alpha透明

索引透明：fireworks中可以选择某一颜色作为透明输出；

布尔透明：只能为不透明或全透明；

alpha透明：有不透明，全透明和半透明。

二.  PNG8, PNG24, PNG32

现在都提倡用PNG8，好处就不用多说了.但是fireworks和photoshop导出的PNG图片却有一些不同。

1.  fireworks

(1. 可以导出布尔透明,alpha透明的PNG8，半透明的PNG8在IE6下全透明，用滤镜可以解决。对于边框发光的效果，倒是一种很好的退化方案。

IE6，



非IE6



(2 可以导出不透明的PNG24，即和JPG的效果相同；

(3. 可以导出alpha透明PNG32。

2. photoshop

(1. 只能导出布尔透明的PNG8；

(2. 可以导出alpha透明的PNG24, 无法导出PNG32。

测 试。应该说PNG24和PNG32是一样，The difference between PNG24 and PNG32(翻 译)中指出PNG32中每个像素不仅存储了24位真彩信息还存储了8位alpha通道。所以fw导出PNG32不用选择透明，而ps导出 PNG24时是要勾选透明度的，这时候的PNG24应该就转化成了PNG32了吧。

三.  IE6 中透明PNG解决方案

1. AlphaImageLoader滤镜

PNG在IE6最常用的解决方案是使用滤镜。

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”images/img.png”, sizingMethod=”scale”);

MSDN中详细介绍了该滤镜。重点提一下sizingMethod属性 吧，sizingMethod=image/scale/crop：image：默认值，增大或减小对象的尺寸边界以适应图片的尺寸；scale：缩放图 片以适应对象的尺寸边界；crop：剪切图片以适应对象尺寸。

但使用滤镜存在很多问题：

(1. 内存问题，有建议说使用滤镜最好不用超过5到6个。

这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增 加了内存开支……

(2. 链接失效，表单无法获焦。

解决方法：使链接和表单元素拥有haslayout，通常是加上position:relavtive，经过测试 position:absolute也可以。但是当父级定义position:absolute时，这种方法会失效。不过这种方法不太稳定；另一种方法， 是将背景层和内容层分开，不作为嵌套关系，而作为同级关系。

(3. 使用滤镜的图片只能作为背景图，且无法平铺。

因此尽量少使用滤镜.

 

源文档 <http://blog.sina.com.cn/s/blog_692a9ee30100k6yr.html>