关于IE6和PNG24和PNG8之间的故事

最近在做学院的门户网站，以前都是直接忽略IE6的，首次尝试兼容IE6，学习兼容效果。

正常情况下：

IE6下:多了个灰色的背景，本来是半透明的效果。

png8和png24的区别

1. png8：

   有1位的布尔透明通道

   要么完全透明，要么完全不透明

2. png24：

   则有8位（256阶）的布尔透明通道

   半透明

   如果是半透明的图片存储为PNG8，图片四周会有锯齿，阴影也会不见png-8 和 gif 有一些相似之处，模式都是索引颜色，只支持像素级的纯透明，不支持 alpha 透明。

IE6下的png24和png8

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

解决方法

1. 换成png8

   用PHOTOSHOP将png24转成png8

2. 滤镜

   代码如下：

   background:url(../images/logo.png) no-repeat 0 0;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”../images/logo.png”,sizingMethod=’crop’);
    _background:none;
   

   sizingMethod：crop|scale|image

   crop：以原图大小显示对容器没影响。

   scale：根据容器大小拉伸图片尺寸。

   image：根据图片尺寸调整容器大小。

   缺点：是背景图片无法定位。

3. JS（滤镜原理）

   pngfix是让IE6支持PNG的一个jquery插件，支持网页图片，背景图（可平铺定位），文本框背景图等。

   推荐：转成png8，最安全、最省力。