解决ie7以下浏览器PNG图片背景不透明且链接失效的办法

图片透明处理

 

<!--[if lt IE 7]>
 <style type="text/css">
 div, img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->
<style>
body { background:url(/bg.jpg)}
.iepng { width:275px; height:94px; background:url(/home.png); padding:20px; }
</style>
<body>
<div class="iepng">Test<br />
  <br />
<a href="#">图片透明</a></div>
</body>
看到了吧,在IE6下测试一下你会发现,PNG的背景已经是透明的了。但是有些时候我们需要在定位的层上实现这样的效果,如本例的效果我想把它固定在其它层之上,类似于弹出窗口的样子,那么就要用position:absolute;把这个层浮动起来。这时问题又出现了,链接居然失效了???

<!--[if lt IE 7]>
 <style type="text/css">
 div, img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->
<style>
body { background:url(/bg.jpg)}
.iepng { position:absolute; top:261px; left:309px; width:275px; height:94px; background:url(/home.png); padding:20px; }
</style>

<body>
<div class="iepng">Test<br />
  <br />
<a href="#">Test Text</a></div>
</body>

之前也看到别人提供的方法,说把为链接定义个相对属性position:relative;,但本人试了好像不行。那么有没有其它方法能实现了,下面本人提供一个比较笨的方法来实现:
既然是绝对位置的浮动层,那么我们采用两个绝对位置的浮动层,把背景单独设置在一个层上,并且让这个层居下,在上边的层上放文字及链接内容,这种方法可行吗??实践是检验真理的唯一标准,让我们拭目以待!!

<!--[if lt IE 7]>
 <style type="text/css">
 div, img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->
<style>
body { background:url(/bg.jpg)}
.iepng { position:absolute; top:261px; left:309px; width:315px; height:134px; background:url(/home.png); z-index:1; }
.iepng1 { position:absolute; top:261px; left:309px; width:275px; height:94px; padding:20px; z-index:2; }
</style>

<body>
<div class="iepng1">TEst<br />
  <br />
<a href="#">Test Text</a></div>
<div class="iepng"></div>
</body>
哈哈,问题居然解决了!采用background:url(/home.png) !important; background:none;filterrogidXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="image", src="/home.png")这种方式让背景透明的,当采用position:absolute;定位时也可以采用双层重叠的方式解决链接失效的问题

 

 

 

 

出处 http://www.aa25.cn/368.shtml

posted @ 2009-03-13 09:21  singleblue  阅读(660)  评论(0编辑  收藏  举报