用CSS在IE中显示透明PNG图像

来源：互联网发布：新开的淘宝店如何运营编辑：程序博客网时间：2024/05/21 21:44

.pngholder{ width:100px; height:100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.misuisui.com/weblog/attachments/200510/03_124401_ie.png'); } .pngalpha{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); background:url(http://www.misuisui.com/weblog/attachments/200510/03_124401_ie.png) no-repeat; width:100px; height:100px; }

原文地址： blog.eshangrao.com/index.php/2005/10/02/43-cssiepng

IE的IMG标签一直显示不了PNG图像的透明背景，前几天在mximize.com看到一个解决的方法：使用AlphaImageLoader和Alpha滤镜通过CSS的方法显示透明的PNG图片

透明

不透明

<html>
<head>
<title>alpha image</title>
<style type="text/css">
.pngholder{
   width:100px;
   height:100px;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.misuisui.com/weblog/attachments/200510/03_124401_ie.png');
}
.pngalpha{
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
     background:url(http://www.misuisui.com/weblog/attachments/200510/03_124401_ie.png) no-repeat;
     width:100px;
     height:100px;
}
</style>
</head>
<body bgcolor="#3399ff#">
<!- And this is your code to implement the image ->
<div>透明</div>
<div class="pngholder"><div class="pngalpha"></div></div>
<div>不透明</div>
<img src="http://www.misuisui.com/weblog/attachments/200510/03_124401_ie.png"/>
</body>
</html>