拥抱PNG(如何在DNN应用PNG格式图象)

dnnsun@gmail.com — Sat, 28 Jun 2008 10:19:16 GMT

PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)这一名称来源于非官方的“PNG's Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。

PNG文件格式保留GIF文件格式的下列特性：
1、使用彩色查找表或者叫做调色板可支持256种颜色的彩色图像。
2、流式读/写性能(streamability)：图像文件格式允许连续读出和写入图像数据，这个特性很适合于在通信过程中生成
和显示图像。
3、逐次逼近显示(progressive display)：这种特性可使在通信链路上传输图像文件的同时就在终端上显示图像，
把整个轮廓显示出来之后逐步显示图像的细节，也就是先用低分辨率显示图像，然后逐步提高它的分辨率。
4、透明性(transparency)：这个性能可使图像中某些部分不显示出来，用来创建一些有特色的图像。
5、辅助信息(ancillary information)：这个特性可用来在图像文件中存储一些文本注释信息。
6、独立于计算机软硬件环境。
7、使用无损压缩。

PNG文件格式中要增加下列GIF文件格式所没有的特性：
1、每个像素为48位的真彩色图像。
2、每个像素为16位的灰度图像。
3、可为灰度图和真彩色图添加α通道。
4、添加图像的γ信息。
5、使用循环冗余码(cyclic redundancy code，CRC)检测损害的文件。
6、加快图像显示的逐次逼近显示方式。
7、标准的读/写工具包。
8、可在一个文件中存储多幅图像。
总结一句话:PNG 为了Web上显示图像显示而制订的格式, 即将在整个Web上广泛流行, 从而替代gif格式。

然而尽管png有种种优越于gif的好处,但是唯一缺陷的是浏览器的支持不够好,其主要表现于在IE6版本以下的浏览器png无法显示透明区域（Firefox、Opera、Safari均支持PNG透明,会出现灰度等背景问题(这不是PNG这个格式图片的问题，而是IE6本身的类Bugs，没有将PNG的Alpha通道打开,故而显示不出透明区域.), 致使有些png图片和周围布局极其不和谐,甚至惨不忍睹，你也许会换成GIF，而GIF的假透明在变换背景时造成毛边现象。

而在DNN如果需要应用png格式图象,可能需要考虑得更多，因为DNN存在皮肤机制或CSS继承关系等等。对于png显示问题，我搜索得到的结果主要有三种种解决方案，其中推荐方案为第二种，故我将着重详述这一方案。

1) 纯粹针对image这一HTML标签的javascript解决方案，也就是这个方案只能解决应用到image标签的png图象问题。其间需要pngfix.js(下载地址),具体操作就是在你需要显示png图象的页面或模块中注册这一脚本,一般是在某一皮肤文件里,例如:

这样你页面的png图象就可以完美的呈现了。（注意:这一脚本是修正版本，也就是可以避免在Firefox出现脚本）
这种方式简单易懂,缺点就是局限于图象标签.

2) htc（Html Components）方式，这是运用微软特有的产物htc来解决，其间需要iepngfix.htc和blank.gif(下载地址), 切入主题，我现在就简单说说如何在DNN中使用这一种方式来解决png图象问题:

<1> 拷贝iepngfix.htc和blank.gif到需要目录,比如你的DNN站点根目录下的images文件夹（yourWebroot/images/ ).

<2> 打开并修改文件iepngfix.htc的blank.gif路径（这是一个可配置项），这里需要注意的是路径必须是相对于IIS站点(例如dnnsun)配置的，一般可修改为:

// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';
//本地站点方式
if (typeof blankImg == 'undefined') var blankImg = '/dnnsun/images/blank.gif';
//在线站点方式
if (typeof blankImg == 'undefined') var blankImg = '/images/blank.gif';

当然你可以直接使用绝对目录，比如:

// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'http://localhost/dnnsun/images/blank.gif';
// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'http://www.dnnsun.com/images/blank.gif';

<3> 添加样式，比如你可以在皮肤样式里边设置:

img, div { behavior: url(/images/iepngfix.htc) }

注意：behavior是IE特有的属性，所以可能会出现波浪线的提示；还有就是此处的url路径问题也是必须类似blank.gif配置，可以是相对路径或绝对路径:

img, div { behavior: url(/dnnsun/images/iepngfix.htc) }
img, div { behavior: url(http://localhost/dnnsun/images/iepngfix.htc) }

扩展应用（这是参考网上解决方案，不是本人原创）：

i) 可在css中使用通配符“*”,比如：

* { behavior: url(/images/iepngfix.htc) }

如此将对HTML(body)内所有标签进行处理，不过这样会加大客户端的资源消耗，延缓页面载入时间。故推荐做法就是细化CSS选择器针对某一个标签甚至是某个ID的元素来套用脚本以获得更好的用户体验。例如：

img,div{behavior: url(iepngfix.htc) }
div#header{behavior: url(iepngfix.htc)}

如果无法预见页面中哪些地方需要这个滤镜，还可以将behavior写入成class以便调用：

.pngsupport{behavior: url(iepngfix.htc)}

ii) 利用IE的CSS条件注释使脚本只应用于IE6及以下版本，减少对IE7用户的影响。

>
*{behavior: url(iepngfix.htc)}
>

注意的是:CSS条件注释只能直接应用在HTML文件（包括皮肤控件），也就是如果你设置在.css中没有任何用户。（本人就曾犯如此错误）

缺陷：
   1、使用PNG透明背景可能导致该元素内部链接无法点击，尤其在链接具有float属性的时候，如：存在于一个浮动列表中的链接。推荐解决方法：使用display:inline代替float来实现块级元素的的横向排列。
   2、img标签的插入的透明PNG图象无法使用右键保存，“另存为”只能取到覆盖在上面的blank.gif。
   3、作为背景的PNG图象无法被平铺，无法被定位，即background-repeat默认为no-repeat，而background-position彻底失效。也就是如果你使用很流行的CSS Sprites则可能失效。
   关于CSS Sprites，可参看如下链接:

CSS Sprites: Image Slicing’s Kiss of Death

How To: Optimize Your Site with Image Sprites
4、在页面刚载入的时候我们依旧能看到PNG图象因为IE6不支持而短暂出现的灰边，时间取决页面文件的大小和网络速度。

3) CSS Trick tip这一方案就简单举一个例子而已:

.div
{
background: url(http://w3css.com/down/img/w3css.png) no-repeat!important ;
background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://w3css.com/down/img/w3css.png");
width: 100px;
height: 30px;
}

需要注意的是: 由于效果是用滤镜实现的,所以必须定义图片大小,而且IE6中也不能用这个方法平铺显示PNG图片背景。

Baldwin's DNN

拥抱PNG(如何在DNN应用PNG格式图象)