PNG8和PNG24的区别

转载 2013年12月06日 11:06:01

今天我做了一个图,因为需要透明,所以我存为了PNG8格式,结果发现图片变了,图片变得四周都

不光滑了,四周都变得有锯齿了,而且阴影也不见了,后来存为PNG24,这些问题就消失了。

我去百度搜索了关于PNG8PNG24的区别,看到下面的文章,原来PNG8要么完全透明,要么完全不透

明,不支持半透明,所以才会出现上面的问题,但PNG24支持半透明的。

详细请看以下文章,希望能帮到您哦,呵呵

 

一直在png图片透明这块,模糊着,虽然XXX,就是因为懒没有认真测试测试。今天看到同事要做一个这样的效果时,发现得弄弄了,于是去新浪微博看下它logo的实现时,遇到这个问题(想知道它用的什么格式的png图)。

首先先做下比较,因为估计做前端的人和我一样知道最多的就是png是一种包含半透明格式的图片。其实我们还要知道:

1.png8png24的根本区别,不是颜色位的区别,而是存储方式不同。

2.png81位的布尔透明通道(要么完全透明,要么完全不透明),png24则有8位(256阶)的布尔透明通道(所谓半透明)。

png-8 和 gif 有一些相似之处,模式都是索引颜色,只支持像素级的纯透明,不支持 alpha 透明。

我们通常说的“IE6 不支持 PNG 透明”,是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明,就像支持 gif 的透明一样。

 

这样我们在工作中就有了方向:

1.色彩丰富的、大的图片切成jpg的;
2.
尺寸小的,色彩不丰富的和背景透明的切成gif或者png8的;
3.
半透明的切成png24

 

回到本文开头的问题,如何区别(最简单的2种办法)

1.ps里看图像---模式,png8当然只有8/通道了。

2.当打开png8的图片时,ps会默认给它的图片标题上加上“索引”两字,png24的则没有。

 

最后说下png透明ie6下的解决问题:

因为懒原来只搜集了办法,没实践,发现看起来很不好,周末好好测试一番,总结一下。

新浪微博的logopng24)采用了下面的方法来实现透明:

_background:none;  

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png',sizingMethod='crop');

但是测试发现当给background:red url(logo.png) no-repeat center;加了红色时,别的浏览器正常识别,ie6会出现依旧不识别的情况。

解决办法是在外面套的标签,或body加背景色,其他办法等周末细弄吧。(background-color:red;单独写就可以了)

相关文章推荐

前端切图之png8和png24的区别

png是一种图片格式,是Portable Networks Graphics的缩写,做ping。 png8和png24的区别如下: 1.“PNG8”是指8位索引色位图,“PNG24”是24位索引色位图...

libpng读取PNG8和PNG24的区别

PNG8和PNG24最大的不同就在于透明度,PNG8只有一位存储透明度,PNG24有8位。这也就影响了PNG数据块的数据格式大小。在libpng中提供了检测设置的方法。 // expand any ...

png-8 和 png-24的区别

png是一种图片格式,是Portable Networks Graphics的缩写,做ping。 png8和png24的区别如下。 方法/步骤 1 ...
  • Smy_yu
  • Smy_yu
  • 2014年07月05日 17:18
  • 778

GIF和几种PNG(8/24/32)以及Alpha/索引色透明对比

PNG这种文件格式值得科普下,对比GIF来说 PNG和GIF都支持动画 PNG的动画也叫APNG,只是firefox支持,详见 http://ooxx.me/apng.orz ,如F...

PNG24在ie6下的完美解决方法!(DD_belatedPNG)

DD_belatedPNG支持 backgrond-position 与 background-repeat,这是其他 js 插件不具备的.同时 DD_belatedPNG 还支持 a:hover 伪...

PNG24图片兼容IE6解决办法

PNG24图片兼容IE6最好的解决办法

解决png24格式图片在ie6中透明问题,

图片透明,锯齿问题是重构人员很头疼的问题,每当遇到这样的问题都让我感觉到不知道从哪入手,虽然能解决这些问题,但是总感觉多少有点缺点,最近遇到这方面的问题,总结了几种实现一些透明小图标的锯齿问题:png...

ie6不能正常显示png24透明图片解决方案_完善中...

方法一、 1.js解决方案             1. DD_belatedPNG.fix('.pngfix'); 2. 在用到透明图片的地方class添加pngf...
  • SyKent
  • SyKent
  • 2012年07月24日 23:16
  • 2231

iepngfix.htc让PNG-24在IE6中透明的方法 03 iepngfix.htc

// IE5.5+ PNG Alpha Fix v2.0 Alpha // (c) 2004-2009 Angus Turnbull http://www.twinhelix.com // Thi...
  • maanhl
  • maanhl
  • 2012年06月26日 22:26
  • 306

使IE6正常显示PNG-24格式图片代码

  • 2013年10月31日 11:52
  • 15KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:PNG8和PNG24的区别
举报原因:
原因补充:

(最多只允许输入30个字)