Div+Css教程模板無(wú)憂(yōu)>建站教程>Div+Css教程>Div+CSS教程>

如何在一個(gè)層上面覆蓋一個(gè)高度自適應(yīng)的透明層？_Div+CSS教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

　　
　　網(wǎng)友JAY剛剛在留言板提出了一個(gè)問(wèn)題，是關(guān)于在一個(gè)層上面覆蓋一個(gè)高度100%的透明層的問(wèn)題。他碰到了一點(diǎn)麻煩，在IE7和FF中沒(méi)有什么問(wèn)題，而在IE6中，就出問(wèn)題了。

示例代碼 [m.ghpqjb.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>
　　想用上面的代碼實(shí)現(xiàn)在img上面蓋一層圖，不過(guò)在IE6里層L2高度不會(huì)隨L1高度變化，IE7和FF2則可以。這個(gè)要怎么辦呢

　　下面我們著手解決這個(gè)問(wèn)題，首先，需要告訴瀏覽器我們的body的高度不是未定義的，而是100%。
　　div2是div1的子對(duì)象。若想讓子對(duì)象適應(yīng)父對(duì)象的高度，首先就要獲取父對(duì)象的高，才對(duì)去適應(yīng)它。
　　div2是層又疊在父對(duì)象div1之上的，我們要明確他們的層疊關(guān)系。
　　好了，有了上面的基本思路，下面我們動(dòng)手編碼：

示例代碼 [m.ghpqjb.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;
}

示例代碼 [m.ghpqjb.com]

　　我們看下面的運(yùn)行效果。我在IE6和FF下面測(cè)試通過(guò)！

代碼調(diào)試框 [m.ghpqjb.com]

[ 可先修改部分代碼再運(yùn)行查看效果 ]

　　我們運(yùn)行機(jī)制所看到的是，本站的logo3在div1中，div2填充了顏色#c00，設(shè)置了半透明的效果。div2中的文字層疊在div1之上。div2自動(dòng)適應(yīng)div1在高度上的變化。
　　你可以在上面的運(yùn)行代碼中的XHTML部分加上：

示例代碼 [m.ghpqjb.com]

　　再次查看運(yùn)行效果。得到了div2自動(dòng)適應(yīng)div1在高度上的變化。
　　