最近在做学院的门户网站,以前都是直接忽略IE6的,首次尝试兼容IE6,学习兼容效果。
正常情况下:
IE6下:多了个灰色的背景,本来是半透明的效果。
png8和png24的区别
-
png8:
有1位的布尔透明通道
要么完全透明,要么完全不透明
-
png24:
则有8位(256阶)的布尔透明通道
半透明
如果是半透明的图片存储为PNG8,图片四周会有锯齿,阴影也会不见png-8 和 gif 有一些相似之处,模式都是索引颜色,只支持像素级的纯透明,不支持 alpha 透明。
IE6下的png24和png8
我们通常说的“IE6 不支持 PNG 透明”,是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明,就像支持 gif 的透明一样。
解决方法
-
换成png8
用PHOTOSHOP将png24转成png8
-
滤镜
代码如下:
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:根据图片尺寸调整容器大小。
缺点:是背景图片无法定位。
-
JS(滤镜原理)
pngfix是让IE6支持PNG的一个jquery插件,支持网页图片,背景图(可平铺定位),文本框背景图等。
推荐:转成png8,最安全、最省力。