如何在一個層上面覆蓋一個高度自適應的透明層？_Div+CSS教程
      
編輯Tag賺U幣
      


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


      


						　　
      　　網友JAY剛剛在留言板提出了一個問題，是關于在一個層上面覆蓋一個高度100%的透明層的問題。他碰到了一點麻煩，在IE7和FF中沒有什么問題，而在IE6中，就出問題了。

      示例代碼 [www.wf0088.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則可以。這個要怎么辦呢 

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

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

      示例代碼 [www.wf0088.com]
      <div id="div1">
          <img src="http://p1.mb5u.com/divcss/logo3.gif" />
          <div id="div2">div div2</div>
      </div>

      　　我們看下面的運行效果。我在IE6和FF下面測試通過！

       代碼調試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運行查看效果 ]

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

      示例代碼 [www.wf0088.com]
      <br /><img src="http://p1.mb5u.com/divcss/logo3.gif" />

      　　再次查看運行效果。得到了div2自動適應div1在高度上的變化。
      　　




      

      



      


      來源：無憂整理//所屬分類：Div+CSS教程/更新時間：2007-01-27


      

      



      


      



      相關Div+CSS教程：