搜索:
首页 >> 网页设计 >> CSS/HTML >> 使IE浏览器支持PNG格式图片的透明效果

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

2008-2-2 作者:Windm.cn翻译 asp之家 投递文章

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

Tags:png  ie  浏览器  图片 
相关文章
手机版 CSS/HTML Asp之家 Aspxhome.com
闽ICP备06017341号