博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使png 图片在网页上透明显示
阅读量:4129 次
发布时间:2019-05-25

本文共 1344 字,大约阅读时间需要 4 分钟。

     周六参加 第八期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 会小一些,需要根据实际情况调试以选择最佳方案。

转载地址:http://nkkvi.baihongyu.com/

你可能感兴趣的文章
Windows7下JDK+Tomcat的安装与配置
查看>>
缺省虚似主机 DefaultHost
查看>>
Tomcat 的 SSL 配置
查看>>
tomcat 默认项目设置
查看>>
Ubuntu 设置命令行分辨率正确方法
查看>>
Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果
查看>>
JSTL标签 参考手册
查看>>
[Phonegap+Sencha Touch] 移动开发21 Sencha touch tapHold事件 触发时间太长的解决办法
查看>>
CXF学习笔记(1)-HelloWorld!-发布webservice .
查看>>
CXF学习笔记(2)-HelloWorld!-客户端调用 .
查看>>
CXF学习笔记(3)-HelloWorld!-通过servlet发布webservice .
查看>>
CXF学习笔记(4)-HelloWorld!-安全认证
查看>>
CXF WebService 1 准备工作
查看>>
CXF WebService 2 入门示例
查看>>
CXFWerService 3 对Interceptor拦截器的支持
查看>>
CXF WebService 4 传递复杂类型对象
查看>>
CXF WebService 5 整合Spring
查看>>
CXF Webservice 6 - Spring 3 整合Apache CXF WebService
查看>>
CXF WebService 7 - Spring整合CXF,发布RSETful 风格WebService
查看>>
CXF WebService 8 - 在cxf中使用配置避免增加字段导致客户端必须更新、同步实体属性的问题
查看>>