欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 从某种程度上说，判断一个网页设计师是否优秀，可以从其在WEB开发（或网页设计）中是否合理的采用各种图片格式得出结论。事实上，或许所有人都知道图片存在GIF,JPG和PNG等格式，但并非所有人都知道它们之间的具体区别和使用技巧。
JPEG格式是一种大小与质量相平衡的压缩图片格式。通俗一点讲，就是：高的压缩比=低的图片质量=小的文件大小。反之，低的压缩比=高的图片质量=大的文件大小。由于JPEG文件无法保持100 ％的原始图像的像素数据，所以它不被认为是一种无损图像格式。
由于这种极其敏感的平衡特性，JPEG非常适合被应用在那些允许轻微失真的像素色彩丰富的图片（照片）场合。反之，JPEG格式图片并不适合做简单色彩（色调少）的图片，比如LOGO，各种小图标（ICONS）。
GIF格式，是为使图片能够应用在在线（online）应用程序上所特别开发的图片格式。Gif，有时也被成为&Giff&，是一种无损，8位图片格式。&无损&是指100%的保持原始图片的像素数据信息。专业名词&8位&是指，所能表现的颜色深度&&一个8位图像仅最多只能支持256种不同颜色（一个多余256种颜色的图片若用gif图片保存会出现失真）。
由于8位颜色深度的限制，Gif不适合应用于各种色彩过于丰富的照片存储场合。但它却非常适合应用在以下场合：
* 小图标（Icon）
* 用于布局的图片（例如某个布局角落，边框等等）
* 仅包含不超过256种色彩的简单，小型图片场合
透明特性：
GIF支持基本的透明特性，这意味着你能够使图片的某些像素&不可见&。在其被放置到网页中时，我们就可以看到通过这些不可见区域看到此图片后面的背景颜色（图片）。此特性非常有用：如果你需要将某个gif图片的内容置于所有图片的上层，你可以将其设置为透明。
压缩特性：
GIF格式采用LZW算法进行压缩，此算法是Unisys申请的一项专利。在很久很久之前，如果你想使用GIF格式，那么就意味着你需要向Unisys付费申请专利许可。不过值得高兴的是，此项专利技术已于日过期，我们现在可以免费的使用GIF了！
隔行扫描：
GIF同时也支持隔行扫描。隔行扫描能够令图片在浏览器中更快的加载和显示。此特性对于那些慢网速的浏览者来说尤其实用。
一个动态的GIF文件，是由若干帧图片所联结而成的动态图片。在显示时，这些动态帧被反复的绘制读取出来从而形成了简单的动画效果。合理的运用GIF动画能够为网页增添动静结合的效果，而过度的使用则会使网页杂乱无章。
PNG，读&ping&，初始时被作为GIF的免费替代格式所开发，采用公共专利压缩算法。PNG格式也是一种无损压缩，但与GIF格式不同的是，PNG同时支持8位和24位的图像。
8位PNG图像：
一个8位PNG图片，支持透明背景且像素颜色不能超过256种。除了压缩算法不同之外，此8位PNG格式与GIF格式极其相似；
8位PNG图片的用途与GIF格式基本相同，
* 小图标（Icon）
* 用于布局的图片（例如某个布局角落，边框等等）
* 仅包含不超过256种色彩的简单，小型图片场合
24位PNG图像：
24位PNG，支持160万种不同的像素颜色且支持Alpha透明效果，这就意味着，无论透明度设置为多少，PNG图片均能够与背景很好的融合在一起。
对PNG的支持：
由于PNG格式的广泛使用和开发者更加重视网页的WEB标准，不同浏览器对PNG的支持就显得相当重要了。不过，幸运的是，目前市场上主流的浏览器对PNG格式都有很好的支持，这包括：IE*, Firefox, Safari, Opera, and Konqueror。
*但不幸的是，IE6及IE6以下的浏览器对的支持并不好（）。不过我们仍可以通过其他方法来解决这个问题，详情请查看如何在。
扩展解决：如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 08:51
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台电脑教程_计算机子分类Photoshop制作清晰的透明PNG图片的方法和技巧
如果不坚持,何必当初那么努力
帖子144263&缘分币523081 Y&阅读权限255&注册时间&
17:10 
Photoshop制作清晰的透明PNG图片的方法和技巧
Png是图像文件存储格式，在网页设计中已经不是一个陌生的名词，在前端开发中经常使用到它，如常用CSS 雪碧图。而Png的使用不仅仅如此，Png有多少种格式，有哪些特点，PC端中常用的Png格式是哪些，手机端最合适的Png格式是什么呢?如果你对这些问题有疑问，那么很开心的告诉你，这里有你需要的答案。
相关技巧教程：
PNG的格式和透明度
这个Fireworks会比较清楚，打开Fireworkd优化面板，可以清楚看到png有3种不同深度的格式：png8、png24、png32。
其中，在优化面板选择png8，可发现png8包括不透明、索引色透明、alpha透明3种格式。
8位的png最多支持256(2的8次方)种颜色，8位的png其实8支持不透明、索引透明、alpha透明。
支持2的24次方种颜色，表现为不透明。
支持2的32次方种颜色，32位是我们最常使用的格式，它是在png在24位的png基础上增加了8位的透明信息，支持不同程度的半透效果。
其实PNG8的3种格式不透明、索引透明、alpha透明，正好把png的所有格式都归类好了：
『png 不透明』格式
『png 索引透明』格式
『png alpha透明』格式
『PNG 不透明』格式
说到不透明，就像jpg格式一样，『png 不透明』只能为不透明，代表格式有：『png8 不透明』和『png24』，导出软件有：Photoshop、Fireworks。不推荐使用『png 不透明』格式，建议用jpg图片来代替它。
可能会有同学会问为什么png24是不透明的，我使用photoshop导出来的就是png24啊?
Png24实际为不透明图片
打开photoshop，任意打开一个带透明的psd文件，存储为web所有格式(ctrl+shift+alt+s)，如下面板所示：
不勾选透明度单选框，图片的透明背景会被默认的白色填充
导出来的png图片深度为24位，图片为不透明，表现跟jpg图片相似
如果勾选了透明度(alpha通道)，导出深度为32位的透明图片
从photoshop存储为web所有格式面板中这样理解，png24深度其实为24位，再勾选上8位的alhpa通道，24+8=32，即『png32』 = 『png24+alpha』，这也许是photoshop软件开发者不添加png32位格式的原因，下图为Photoshop存储为web所有格式界面的图片格式选择，并没有png32位的选项~
『PNG 索引透明』格式
说到索引颜色透明，我们可以了解下什么是索引颜色，『png 索引透明』代表格式有『png8 索引透明』,导出软件有：Photoshop、Fireworks，它的特点总结如下：
挑选一副图片中最有代表性的若干种颜色(通常不超过256种)
只能为不透明或全透明
文件体积小
带有杂边锯齿
如何使用Photoshop导出『png8 索引透明』
使用Photoshop，存储为web所有格式，按照如下图片的红色边框配置，可导出png8索引透明
注：使用Photoshop导出『png8 索引透明』的效果比Fireworks导出的效果良好，这里不介绍使用Fireworks导出『png8 索引透明』
『png8 索引透明』产生杂边锯齿原因
『png8 索引透明』只有透明索引颜色，没有半透明索引颜色，下图左侧为带半透明像素的图片，在浏览器中打开不会有锯齿，而右侧图片为全透明或不透明的像素，在浏览器打开后有锯齿。
由于『png8 索引透明』没有半透明索引颜色，使用Photoshop导出时，原有的半透明转化为不透明，从而产生锯齿。
如何避免『png8 索引透明』的杂边锯齿
方法：设置杂边与背景色颜色一致可达到视觉上透明。
相信不难理解，利用杂边与背景色一致，可以来满足视觉上的透明，缺点是只能适应一种背景色，在其它背景色下同样会产生杂边。
怎么设置呢，打开Photoshop，在存储为web格式面板中进行如下操作，在杂边选项中选择与背景色一致的颜色。
『PNG Alpha透明』格式
说到alpha透明，我们可以了解下什么是alpha通道，『png alpha透明』代表格式有『png8 alpha透明』和『png32』，导出软件有Fireworks，它的特点总结如下：
一个8位的灰度通道，该通道用256级灰度来记录图像中的透明度信息，定义透明、不透明和半透明区域
支持全透明和半透明
『Png8 alpha透明』文件体积小
『Png8 alpha透明』在IE6下有毛边
如何使用Fireworks导出『png8 alpha透明』
Firewoks中，在优化面板，按照如下图片的红色边框配置，可导出png8 alpha透明。
注：Firewoks支持导出『png8 alpha透明』，Photoshop不支持导出『png8 alpha透明』
手机端选择哪种Png
说到手机，考虑流量的问题是必不可少的，所选png需要满足体积小和视觉效果良好，那么哪种png格式符合这2个要求呢?做个实验吧~
不同Png格式测试
测试平台：ios&android webkit浏览器
测试图片：彩种雪碧图1230*82
测试内容：同一张雪碧图导出不同png格式的大小、透明度、杂边以及在retina显示屏和普通显示屏下的对比
测试结果：
从上图可见png32和png24体积太大了，十分消耗手机用户流量，不是我们选择的范围，那么可以锁定目标在『png8 alpha透明』和『png8 索引透明』中，2者对比，可以看出『png8 alpha』在手机端的支持是良好，可能有童鞋会认为，单凭一张图片也不能下结论~
而经过笔者使用多张雪碧图测试后使用Fireworks导出的『png8 alpha』，在手机端的支持是比较好的~不仅文件体积小，节省流量，而且半透明效果良好
于是，移动端采用『Png8 alpha透明』，相信『Png8 alpha透明』是未来的一种趋势~
PC端选择哪种Png
PC端使用哪种png，其实这个话题很早就有结论了，这里简单介绍下。
使用png8的方案：
使用photoshop打开雪碧图，分别导出一张png32和一张『png8 索引透明』的图片，高级浏览器使用png32位图片，针对IE6使用『png8 索引透明』，并设置『png8 索引透明』杂边与背景色颜色一致可达到视觉上透明
注：为啥使用png32而不使用『png8 alpha透明』?因为pc端的网速大多良好，建议使用表现更佳的png图片，显然png32是最合适的，当然你也可以使用『png8 alpha透明』，但是在高清显示器下的质量不如png32
background:url(global.png?v=) no-
_background:url(global_png8.png?v=) no-//IE6使用的背景图
使用IE滤镜的方案：
比较耗性能，而且存在不支持背景平铺，导致链接失效等缺点，不推荐该方案，不要为了IE而把自己搞得像IE~
.bg{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&img. png&, sizingMethod=&scale&);}
另外还有js和打补丁的办法，这里不做介绍，大家有兴趣可以百度下：IE6支持png24
Png的格式、颜色种类、位数、透明度、浏览器支持一览
如果您在做图或者看教程（PHOTOSHOP方面），遇到任何问题请到问题交流区提问，地址：；我们会在第一时间帮助您解决问题，如果在教程后面跟帖，一律不给予解决！~
UID1&精华&积分254541&威望19860 F&回复币49849 B&警告0 次&贡献2117557 &金币2 个&学分0 点&性别男&来自上海&最后登录&
当前时区 GMT+8, 现在时间是怎么制作透明图片,可以点后面的链接_百度知道
怎么制作透明图片,可以点后面的链接
我用Photoshop做了一张图片，中间空白处是透明的，下边覆盖的是连接，可是鼠标放到透明处却不能点到下边的连接。Flash中透明效果就可以点到下边覆盖的连接，请问怎么样在Flash中把这张图片成：中间透明可以点到下边覆盖的连接的效果呢？ 请各位大虾帮帮我啦！！！
我有更好的答案
在回答这个问题之前，我们简单地说明一下哪些图片格式可以保存透明信息。在我们常用图片的格式中，像BMP、JPG格式的图片是不能保存透明信息的,系统会默认为白色背景。GIF格式的图片可以保存透明信息，但GIF格式的图片最多只能有256种颜色，因而只能使用在对图片要求不高的场合。比较理想的是图片处理软件Photoshop的图片格式PSD，但以上三种常用课件制作软件中，只有Authorware可以支持PSD格式，而另外两种均不支持。所以今天我们这里要介绍另外一种格式：PNG格式，PNG格式的图片支持无损压缩，而且可以很好地保存透明信息，最重要的一点是，以上三种软件都可以支持该格式。 下面我们就来看一下，如何利用Photoshop输出带有透明信息的PNG格式的图片。 启动Photoshop，打开所需的图片文件。这时，我们在图层面板...
其他类似问题
29人觉得有用
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁