<!--[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;定位时也可以采用双层重叠的方式解决链接失效的问题
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。