打印

在IE中显示透明PNG图片的方法

在IE中显示透明PNG图片的方法

昨天做了一个页面,在加logo的时候,发现logo显示出来周围总是带一圈灰色。logo的格式的是PNG-24,后来在baidu里search了一下,发现问题的缘由是因为IE不能完美支持PNG透明图片,里面原来的alpha通道给弄没了。
关于这个问题的详细解决方法是利用CSS中的AlphaImageLoader滤镜。
我在本地用这个方法测试了很久发现没有成功,最后经过search发现问题出现在路径上。下面我说一下具体的使用方式:
我的图片/pic:logo.png----存放在G盘web/Myweb/images/目录下。页面文件index.html在Myweb目录下。看一下index页相关代码:
<!-- header -->
<div id="header">
<div id="logo"></div>
<div id="title"></div>
</div>
-----------下面是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");
6571——
♂[我的号码,我的网]--[备份你的大学生活]♀
71网友群:5454736
强,收集了.
以前我都是尽量不用到透明的JPG,如果需要边缘颜色与背景匹配,就把边缘做成背景颜色的过渡.
GIF虽然支持透明,但颜色质量明显地下降了很多.这方法不错,回头试试看.
嗯,PNG格式的效果出来很好,如果IE能直接支持就好了。避免这么多麻烦,来回hack。
有段时间我也有需求,搜了几种方法都不理想,还是做成gif了~~要不然换IE7吧,就可以自欺欺人了 呵呵~~要不就用opera ff~~弱智ie6,居然不支持透明png~~BS
BTW,在ff和opera下看论坛和ie下显示稍有差别,顶部导航那里:)logo那里还可以忍一忍~呵呵
嗯,发现这个问题了。一般我都是无视
6571——
♂[我的号码,我的网]--[备份你的大学生活]♀
71网友群:5454736

这个也没什么大影响了,国内有些网站在反复ff下那简直是惨不忍睹啊 呵呵呵呵~
David不用Q吗?
现在招个做网页的要求会些什么呢?先打听打听:D
不过感觉搞程序的都是抄来抄去的,又累,呵呵
返回顶部
AYBlue

Processed in 0.055504 second(s), 6 queries, Gzip enabled.

当前时区 GMT+8, 现在时间是 2008-7-4 13:49 京ICP备05002223号

- 清除 Cookies - 联系我们 - 6571论坛 - Archiver - WAP