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

原文地址: <a href=’http://blog.eshangrao.com/index.php/2005/10/02/43-cssiepng‘>http://blog.eshangrao.com/index.php/2005/10/02/43-cssiepng</a><br/>
<br/>
IE的IMG标签一直显示不了PNG图像的透明背景,前几天在mximize.com看到一个解决的方法:使用AlphaImageLoader和Alpha滤镜通过CSS的方法显示透明的PNG图片<br/>
<br/>
<style type="text/css">
.pngholder{
   width:100px;
   height:100px;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’https://s5s5.me/wp-content/uploads/attachments/200510/03_124401_ie.png‘);
  }
.pngalpha{
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
     background:url(https://s5s5.me/wp-content/uploads/attachments/200510/03_124401_ie.png) no-repeat;
     width:100px;
     height:100px;
  }
</style>
  <!- And this is your code to implement the image ->
  <div>透明</div>
  <div class="pngholder"><div class="pngalpha"></div></div>
  <div>不透明</div>
  <img src="https://s5s5.me/wp-content/uploads/attachments/200510/03_124401_ie.png"/>
[separator]<br/>
代码如下:<br/>
<xmp><style type="text/css">
.pngholder{
   width:100px;
   height:100px;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’https://s5s5.me/wp-content/uploads/attachments/200510/03_124401_ie.png‘);
  }
.pngalpha{
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
     background:url(https://s5s5.me/wp-content/uploads/attachments/200510/03_124401_ie.png) no-repeat;
     width:100px;
     height:100px;
  }
</style>
  <!- And this is your code to implement the image ->
  <div>透明</div>
  <div class="pngholder"><div class="pngalpha"></div></div>
  <div>不透明</div>
  <img src="https://s5s5.me/wp-content/uploads/attachments/200510/03_124401_ie.png"/></xmp>

打赏

发布者:s5s5

https://s5s5.me

加入对话

8条评论

  1. 不错哦
    gif有杂边,实现效果没有png好
    不过想知道png图片加上链接以后热点会怎么样的
    我ctrl A的时候没有选定整个图片

  2. 又看了一下才发现是把图片放到DIV的背景里了,加热点的话可能比较麻烦,要用别的手段才行~

留下评论

电子邮件地址不会被公开。 必填项已用*标注