David’s Simple Life

昨天做了一个页面，在加logo的时候，发现logo显示出来周围总是带一圈灰色。logo的格式的是PNG-24，后来在baidu里search了一下，发现问题的缘由是因为IE不能完美支持PNG透明图片，里面原来的alpha通道给弄没了。

关于这个问题的详细解决方法是利用CSS中的AlphaImageLoader滤镜。

我在本地用这个方法测试了很久发现没有成功，最后经过search发现问题出现在路径上。下面我说一下具体的使用方式：

我的图片/pic：logo.png—-存放在G盘web/Myweb/images/目录下。页面文件index.html在Myweb目录下。看一下index页相关代码：

———–下面是CSS的相关代码———–

#header{
…;
}
#logo{
background: url(../images/logo.png) no-repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=”file:///G:/Web/Myweb/images/logo.png”);
/* show transprent png format pic in IE browser. */
background:none;
}

这次就perfect了，可以在IE中显示PNG透明图片了。

附关于AlphaImageLoader滤镜介绍：

AlphaImageLoader滤镜用于在容器范围内的背景和内容间显示图片，可以剪切或缩放图片的大小，支持0~100%透明度的PNG图片。AlphaImageLoader滤镜的两个参数说明如下：
sizingMethod 设置或获取滤镜作用的对象的图片在对象容器边界内的显示方式，可选值有crop(剪切图片以适用容器尺寸)，image(使容器尺寸适用图片尺寸，默认值)和scale(缩放图片尺寸以适用容器尺寸)。
src 指定作为背景图片的地址。

格式：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=”path of pic”);

----------------------------------------------
本文作者： David
本文网址：http://simplife.org/2006/12/30/show-png-format-pic-in-ie-browser.html
版权所有，转载时必须以链接形式注明作者和原始出处及本声明。