PNG in IE - 1 - pngfix.js

宰子琪
2023-12-01

PNG = Portable Network Graphic

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

文件扩展名:.png
MIME类型:image/png
开发者:W3C
格式类型:位图图像文件格式
扩展到:APNGJNGMNG

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

 类似资料: