如何在一个层上面覆盖一个高度自适应的透明层？_Div+CSS教程
教程Tag：暂无Tag,欢迎添加,赚取U币!
网友JAY刚刚在留言板提出了一个问题，是关于在一个层上面覆盖一个高度100%的透明层的问题。他碰到了一点麻烦，在IE7和FF中没有什么问题，而在IE6中，就出问题了。
示例代码 [www.mb5u.com]
JAY [2007-01-27 00:38:27]
#L1{position:relative;float:left;}
#L1 #L2{position:absolute;width:100%;height:100%;top:0px;left:0px;
background:url(...) bottom left no-repeat;}
<div id="L1"><img.../><div id="L2"></div></div>
想用上面的代码实现在img上面盖一层图，不过在IE6里层L2高度不会随L1高度变化，IE7和FF2则可以。这个要怎么办呢
#L1{position:relative;float:left;}
#L1 #L2{position:absolute;width:100%;height:100%;top:0px;left:0px;
background:url(...) bottom left no-repeat;}
<div id="L1"><img.../><div id="L2"></div></div>
想用上面的代码实现在img上面盖一层图，不过在IE6里层L2高度不会随L1高度变化，IE7和FF2则可以。这个要怎么办呢
下面我们着手解决这个问题，首先，需要告诉浏览器我们的body的高度不是未定义的，而是100%。
div2是div1的子对象。若想让子对象适应父对象的高度，首先就要获取父对象的高，才对去适应它。
div2是层又叠在父对象div1之上的，我们要明确他们的层叠关系。
好了，有了上面的基本思路，下面我们动手编码：
示例代码 [www.mb5u.com]
* { margin:0; padding:0;}
body { height:100%; }
#div1{
position:relative;
float:left;
height:100%;
}
#div1 #div2{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
/*background:url(/uploads/divcss/logo3.gif) bottom left no-repeat; */
z-index:1;
-moz-opacity:0.5;
filter:alpha(opacity=50);
background:#c00;
}
body { height:100%; }
#div1{
position:relative;
float:left;
height:100%;
}
#div1 #div2{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
/*background:url(/uploads/divcss/logo3.gif) bottom left no-repeat; */
z-index:1;
-moz-opacity:0.5;
filter:alpha(opacity=50);
background:#c00;
}
示例代码 [www.mb5u.com]
<div id="div1">
<img src="http://p1.mb5u.com/divcss/logo3.gif" />
<div id="div2">div div2</div>
</div>
<img src="http://p1.mb5u.com/divcss/logo3.gif" />
<div id="div2">div div2</div>
</div>
我们看下面的运行效果。我在IE6和FF下面测试通过！
代码调试框 [www.mb5u.com]
我们运行机制所看到的是，本站的logo3在div1中，div2填充了颜色#c00，设置了半透明的效果。div2中的文字层叠在div1之上。div2自动适应div1在高度上的变化。
你可以在上面的运行代码中的XHTML部分加上：
示例代码 [www.mb5u.com]
<br /><img src="http://p1.mb5u.com/divcss/logo3.gif" />
再次查看运行效果。得到了div2自动适应div1在高度上的变化。
相关Div+CSS教程：
- 相关链接：
- 教程说明：
Div+CSS教程-如何在一个层上面覆盖一个高度自适应的透明层？
。