PNG8和PNG24的区别

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

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

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

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

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

 

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

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

1.png8和png24的根本区别，不是颜色位的区别，而是存储方式不同。

2.png8有1位的布尔透明通道（要么完全透明，要么完全不透明），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下的解决问题：

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

新浪微博的logo（png24）采用了下面的方法来实现透明：

_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;单独写就可以了）