PNG点点

我冒着被人BS的危险,写下这篇文章。突然想到《风声》顾晓梦最后的话。YY ……我在唾骂中留下这份记录,我不敢坚信,只是奢望BS我的人会明白我的心情。我如此无耻的写下被人写过N遍的PNG,只因大牛们都追求原创,我等菜鸟只能奋不顾身,挽救于万一,大牛们不会理解,菜鸟不只一些,而是很多很多,阿门!

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

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

布尔透明:只能为不透明或全透明;

alpha透明:有不透明,全透明和半透明。

二.  PNG8, PNG24, PNG32

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

1.  fireworks

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

IE6,IE6-PNG8非IE6notIE6-PNG8

(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. 使用滤镜的图片只能作为背景图,且无法平铺。

因此尽量少使用滤镜。使用滤镜的测试文档,这里

2. JS

一些脚本其实是滤镜的增强版,如使PNG可以作为嵌入图片,或者作为背景图片可以平铺。有时间的话这些脚本的性能进行测试吧。

    1. SuperSleight
    2. unitpngfix
    3. DD_belatedPNG
    4. 一些汇总

      主要参考

      www.911xq.com
      www.enshisjw.com