网络编程
位置：首页>> 网络编程>> 网页设计>> 使IE浏览器支持PNG格式图片的透明效果

使IE浏览器支持PNG格式图片的透明效果

作者：Windm.cn翻译　　发布时间：2008-02-02 16:20:00　

标签：png,ie,浏览器,图片

PNG格式以支持透明和无损，且相对大小适中，已成为现在网页中图片运用的主流。

有些时候我们在制作网页时使用PNG格式图片，用IE浏览器查看却无法显示需要的效果，半透明
的部分直接给渲染成白色，只有Mozila的FireFox能支持这种透明效果的显示。

先来看下这2两个主要的浏览器对PNG图片透明度的解析情况吧。

Mozilla Firefox

支持PNG透明度渲染，显示无问题

Internet Explorer6

不支持PNG透明显示，显示为白块

解决方法：创建一个容器包含该图片，这里我们用<div>标签.

使用如下HTML代码:

<body>
<div class="pngimg">
</div>
</body> 

应用如下CSS样式:

<style>
body {
background-color:#000;
}
div.pngimg {
background:url(flower-transparent.png) no-repeat;
height:100px;
width:100px;
}
</style> 

但是这套CSS代码只适用于FireFox,并不适用于IE浏览器,要适用于IE,我们必须要添加适用于IE的另一套CSS样式代码,代码如下:

<!--[if gte IE 5]>
<style type="text/css">
div.pngimg {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='flower.png' ,sizingMethod='crop');
}
</style>
<![endif]--> 

如此,IE就可以支持PNG透明度的显示了.该代码其实时调用了IE专有的
Alpha滤镜,注意该滤镜只支持IE5.5或更新的版本.

相关推荐：苏沈小雨css样式表滤镜中文手册chm

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com