06
PNG的使用技巧
PNG的格式和透明度
这个
其中,在优化面板选择
PNG8
8位的
PNG24
支持2的24次方种颜色,表现为不透明。
PNG32
支持2的32次方种颜色,32位是我们最常使用的格式,它是在
其实
- 『
png 不透明』格式 - 『
png 索引透明』格式 - 『
png alpha透明』格式
『PNG 不透明』格式
说到不透明,就像jpg格式一样,『
可能会有同学会问为什么
打开
不勾选透明度单选框,图片的透明背景会被默认的白色填充
导出来的
如果勾选了透明度(alpha通道),导出深度为32位的透明图片
从
『PNG 索引透明』格式
说到索引颜色透明,我们可以了解下什么是索引颜色,『
- 挑选一副图片中最有代表性的若干种颜色(通常不超过256种)
- 只能为不透明或全透明
- 文件体积小
- 带有杂边锯齿
- 支持IE6
如何使用Photoshop导出『png8 索引透明』
使用
注:使用
『png8 索引透明』产生杂边锯齿原因
『
由于『
如何避免『png8 索引透明』的杂边锯齿
方法:设置杂边与背景色颜色一致可达到视觉上透明。
相信不难理解,利用杂边与背景色一致,可以来满足视觉上的透明,缺点是只能适应一种背景色,在其它背景色下同样会产生杂边。
怎么设置呢,打开
『PNG Alpha透明』格式
说到alpha透明,我们可以了解下什么是alpha通道,『
- 一个8位的灰度通道,该通道用256级灰度来记录图像中的透明度信息,定义透明、不透明和半透明区域
- 支持全透明和半透明
- 『
Png 8 alpha透明』文件体积小 - 『
Png 8 alpha透明』在IE6下有毛边
如何使用Fireworks导出『png8 alpha透明』
Firewoks中,在优化面板,按照如下图片的红色边框配置,可导出
注:Firewoks支持导出『
手机端选择哪种Png
说到手机,考虑流量的问题是必不可少的,所选
不同
测试平台:ios&android webkit浏览器
测试图片:彩种雪碧图1230*82
测试内容:同一张雪碧图导出不同
测试结果:
从上图可见
而经过笔者使用多张雪碧图测试后使用
于是,移动端采用『
PC端选择哪种Png
PC端使用哪种
使用
使用
注:为啥使用
.bg{ background:url(global.
使用IE滤镜的方案:
比较耗性能,而且存在不支持背景平铺,导致链接失效等缺点,不推荐该方案,不要为了IE而把自己搞得像IE~
.bg{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img.
另外还有js和打补丁的办法,这里不做介绍,大家有兴趣可以百度下:IE6支持
Png的格式、颜色种类、位数、透明度、浏览器支持一览
相关推荐
- PS制作透明紫色玻璃字体
- PhotoShop打造庄重的历史主题色调照片
- PS调色教程: 美女人像的5种流行色调
- PS美化教程|磨皮教程,双曲线磨皮视频教程
- Photoshop霓虹字效果制作方法
- Photoshop打造唯美的暗调室内人像
- Photoshop给逆光人物磨皮及局部美化
- Photoshop调色教程: 玛雅摄影后期色调
- Fireworks打造超酷质感按钮
- PS调色教程之Photoshop制作照片沧凉悲荒特殊效果制作教程
- Photoshop制作Vista水晶质感桌面
- PS实用技巧: 切片工具切图技巧
- 简单两步打造梦幻的冷色荷花
- PS滤镜及图案快速把人物转为素描画效果
- Photoshop绘制圆锥体
- Photoshop制作大气干净的白色气泡