PNG in IE - 1 - pngfix.js

PNG = Portable Network Graphic

以下信息来自http://zh.wikipedia.org/wiki/PNG

文件扩展名:.png
MIME类型:image/png
开发者:W3C
格式类型:位图图像文件格式
扩展到:APNG、JNG和MNG

PNG是一种非失真性壓縮位图图形文件格式。PNG格式是非失真性壓縮的，允许使用类似于GIF格式的调色板技术，支持真彩色图像，并具备阿尔法通道（半透明）等特性。現在有很多人使用PNG格式於互联网及其他方面上。

PNG的的英文名称为Portable Network Graphics，即便携式网络图片。另有说法是名称来源于非官方的"PNG is Not GIF"。

• 支持256色调色板技术以产生小体积文件
• 最高支持48位真彩色图像以及16位灰度图像。
• 支持阿尔法通道的半透明特性。
• 支持图像亮度的gamma校正信息。
• 支持存储附加文本信息，以保留图像名称、作者、版权、创作时间、注释等信息。
• 使用无损压缩
• 渐近显示和流式读写，适合在网络传输中快速显示预览效果后再展示全貌。
• 使用CRC循环冗餘编码防止文件出错。
• 最新的PNG标准允许在一个文件内存储多幅图像。

PNG的图像体积小，支持真彩图像和Alpha通道，在Web中的应用越来越广；IE占据了大量的浏览器市场，使得开发者不得不考虑IE对PNG的支持问题。IE7完成了对PNG的支持，但目前IE6的用户仍然是大多数，含有Alpha通道的PNG并不能在IE6中正常显示，透明部分通常会显示为灰色。

下面介绍一些PNG在IE6中的透明实现方案。

1 - pngfix.js

用google搜一下PNG在IE6中透明方案，得到的答案大多数是这个。pngfix是一段小巧的js脚本，其首页为http://drupal.org/project/pngfix，采用的技术是DXImageTransform.Microsoft.AlphaImageLoader这个CSS滤镜，从名字上就可以看出，这是MS的独有的滤镜，在IE5.5+中有支持，当应用的图片为PNG格式时，能够设定PNG图片的透明度(0%~100%)。

使用时，只需将pngfix.js引入到页面中，js就会检索页面中所有的png图片，为它们应用MS.AlphaImageLoader，以达到透明的效果。应用滤镜的特点就是慢，还记得5.12全国哀悼日的时候，所有的网站都应用了滤镜，页面的渲染速度慢了很多。

pngfix应用起来简单，但性能实在不能恭维，给我唯一的收获就是知道了MS.AlphaImageLoader这个滤镜的用法，当页面中有少量PNG图片时可以考虑应用，如果将PNG作为系统中的主要图片格式，则会给性能造成很大影响。

预告：下一个方案：PNGPong

转载于:https://www.cnblogs.com/guadan2001/archive/2008/07/05/1236245.html