一、PNG8
Alpha透明的全色PNG(png32、png24)在ie6中会出现背景颜色,Alpha透明的PNG8在IE6下半透明部分显示为全透明,是透明Gif的加强版,在其它浏览器下正常显示半透明。Photoshop只能导出布尔透明的PNG8,Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8。
Fireworks导出alpha透明的PNG8方法:文件→导出向导,图像预览中格式选择PNG8(Alpha透明度)。
二、滤镜
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插件,支持网页图片,背景图(可平铺定位),文本框背景图等。
下载地址:http://download.csdn.net/source/3518486
四、VML(DD_belatedPNG)
参考资料:http://www.dillerdesign.com/experiment/DD_belatedPNG/
引用代码:
<!--[if IE6]>
<scriptsrc="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg,.box,.img');
</script>
<![endif]-->
注意点:
1、不能在body中使用,因为VML是生成兄弟节点,而body不能生成与之相邻的节点
2、tr、td支持不好
3、不支持background-position:fixed;
4、不支持<inputtype="image"/>
优点:支持图片,背景,背景定位平铺。
缺点:页面加载后再使用JS生成显示出来的节点会失效;在某些IE6下会显示空白,原因与微软VML的更新补丁有关;页面上使用的元素较多时影响性能。
优先采用Alpha透明的PNG8图片,此方法只需改变图片格式而不依赖其它手段,操作简单。当此种方法不能满足需求时,用到较少PNG图时可采用滤镜,由于滤镜对性能影响较大,所以需要使用较多PNG图片时用DD_belatedPNG方法。具体做法视项目情况而定。