PNG in IE - 1 - pngfix.js

PNG = Portable Network Graphic

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

文件扩展名:.pngMIME类型: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

PNG in IE - 1 - pngfix.js相关推荐

前端面试题 HTML、CSS、JS、Vue、Es6
第一部分 HTML&CSS整理答案什么是HTML5? 答:HTML5是最新的HTML标准. 注意:讲述HTML5推出的设计目的,以及现在市场的使用情况,浏览器支持情况等.... 设计目的 H ...
IE6 png背景图片显示不正常处理
http://xiaoboss.iteye.com/blog/1167829 现在web设计,画面是越来越炫但是使用了透明的背景图,在IE6下, 在ie78 ff等浏览器显示正常. 解决办法: Ht ...
让IE6支持图片半透明
众所周知,透明格式的PNG24在IE6透明部分将会被灰色替代. 那么,到底有什么方法可以解决这个bug? 解决方法: ①用PNG8格式图片替代PNG24格式的图片用fireworks导出Al ...
解决IE6中 PNG图片透明的终极方案-八种方案！
"珍惜生命,远离IE6",IE6中的bug令很多Web前端开发人员实为头疼,因此不知道烧了多少脑细胞,在众多的Bug中最令人抓狂的就是IE对png图片的不支持,导致设计师和重构师放 ...
试卷自动生成系统（JSP+MySQL）
目录摘要 I Abstract II 1绪论 1 1.1选题背景及意义 1 1.2研究现状 2 1.3研究主要内容 2 2系统工具 4 2.1 Myeclipse 4 2.2 Mysql数据库 4 ...
html背景透明图片不透明,css中背景透明的图片不透明怎么解决
css中背景透明的图片不透明怎么解决一.使用滤镜解决img { background: transparent; -ms-filter: "progid:DXImageTransform. ...
web前端工程师工作中遇到难以解决的问题
1).margin-top,margin-bottom不能正常显示时一.有时会遇到外层中的子层使用margin-top不管用的情况:这里我们需要在子层的前后加上一个div{height:0;over ...
Web前端开发的问题汇总
1).margin-top,margin-bottom不能正常显示时一.有时会遇到外层中的子层使用margin-top不管用的情况:这里我们需要在子层的前后加上一个 div{height:0;ove ...
解决IE6中PNG透明显示灰底的8种方法
方案一 - 滤镜解决方案介绍:滤镜从IE4.0被微软正式引入,所以我们可以使用滤镜解决IE6的PNG透明问题,滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片.注意:此方法在部分版本的I ...

PNG in IE - 1 - pngfix.js

1 - pngfix.js

PNG in IE - 1 - pngfix.js相关推荐

最新文章

热门文章