再谈容器的透明

在昨天的文章《PNG图片实现层的透明 》一帖中说到,在给div添加alpha属性后,其容器内内容继承了其透明属性,导致内容alpha也被赋值。
今日翻到一叶千鸟的一贴,发现,其实我们同样可以控制容器内内容不受到其影响。
uploads/200606/09_224943_2.jpg
演示地址: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。

Random Posts

留下回复