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

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

正常情况下:

xg2

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

xg3


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,最安全、最省力。

麻凯倩

微信:makaiqian