使png 图片在网页上透明显示

     周六参加webtech 第八期web交流会，讲到图片优化方面，其实涉及到一个png图片替代gif ，但是在网页中无法实现透明效果。

 

     观察淘宝的图片，其实都是png的。解决的方案是采用png-8 实现透明。

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

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

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

 

特性

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

  

 

PNG分为两种格式: PNG-8和PNG-24。PNG-8跟GIF一样最高支持256色,PNG-24支持48位真彩色,有时候比JPG更好,这一点不在讨论范围。

 

如何生成 PNG-8 和 PNG-24 的图像？使用 PS 的“储存为 Web 所用格式”（快捷键：Alt + Shift + Ctrl + S），在右侧属性窗口选择图像格式。如果使用fireworks则是“文件--图像预览”（快捷键：ctrl+shift+x）,在相关栏目选择“格式 ”“调色板”“索引色等”导出...

一、PNG-8 与 GIF

PNG-8跟GIF一样支持单色透明。GIF有的有点PNG-8都有，GIF没有的PNG-8还有，比如:同样的文件PNG-8格式的却比GIF要小。

 

二、PNG-8 与 PNG-24 对IE6的支持程度

PNG-24是支持alpha通道透明的格式，支持半透明，IE6不支持PNG-24,但是他完全支持PNG-8。
如果是不透明的PNG-24,IE6也是完美支持,之所以说IE6不支持PNG-24是因为PNG-24的半透明会在IE6里显示不正常。

 

三、PNG-8 与 PNG-24 的透明区别

PNG-8 和 gif 有一些相似之处，模式都是索引颜色，只支持像素级的纯透明，不支持 alpha 透明。我们通常说的“IE6 不支持 PNG 透明”，是指不支持 PNG-24 的透明（将透明区域显示为灰色）。但是 IE6 支持 PNG-8 的透明，就像支持 gif 的透明一样。

 

四、PNG-8 的高压缩比

切图时，有时选择 PNG-8 可以获得更高的压缩比。注意，是 PNG-8，不是 PNG-24。不过有些情况下还是 gif 或 jpg 会小一些，需要根据实际情况调试以选择最佳方案。