在昨天的文章《PNG图片实现层的透明 》一帖中说到,在给div添加alpha属性后,其容器内内容继承了其透明属性,导致内容alpha也被赋值。
今日翻到一叶千鸟的一贴,发现,其实我们同样可以控制容器内内容不受到其影响。

演示地址:http://www.5key.net/ex/alpha
css代码:
body{
margin:0px;
padding:0px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
div#test{
background-image:url(img/bg.jpg);
background-repeat:no-repeat;
width:505px;
height:290px;
padding:10px;
}
div#testbox{
background-color:black;
filter:Alpha(opacity=50);
width:300px;
height:100px;
color:white;
padding:10px;
font-size:14px;
font-weight:bold;}
div#testbox span{
position:relative;
}
HTML
<div id=”test”><div id=”testbox”><span>测试透明属性</span></div></div>
关键就在这个位置:position:relative;
在IE6环境下,定义内部对象不可层叠,可以不受外层容器的透明定义控制。
但是这个方法有一定限制:
当容器本身就已经有了relative属性,其内部容器的relative属性就会失效,且不兼容FF。
