透明固定標題下溢

Question

我已經構建了一個頁面，其中固定標題始終停留在頁面頂部。該頁面具有背景圖片，並且標題是透明的。

我的基本佈局：

<div id="header-container"> 

    <header class="wrapper"> 
     <h1 id="title">Headline</h1> 
    </header> 
    <nav id="main-navigation" class="wrapper"> 
     <ul> 
      <li><a href="#">Nav Item</a></li> 
     </ul> 
    </nav> <!-- #main-navigation --> 

</div> <!-- #header-container --> 

<div id="main-container" class="wrapper"> 

    <article id="main">  
      <section class="content"> 
       <h2>some headline</h2> 
       <p>content stuff</p> 
      </section> 
    </article> <!-- #main --> 


    <footer id="footer"> 
      footer stuff 
    </footer><!-- #footer --> 

</div> <!-- #main-container -->​ 

這是最重要的CSS：

#main-container { 
    margin-top: 150px; 
}  

#header-container{ 
    height: 150px; 
    top: 0; 
    position: fixed; 
    right: 0; 
    left: 0; 
    z-index: 1030; 
} 

這裏我的jsfiddle：http://jsfiddle.net/0xsven/RBnHt/

當我滾動顯示在網站上我想要的#main - 容器的下溢（在標題容器下面）被隱藏（不知何故就像一個反轉的溢出：隱藏）。

如何在不改變佈局的情況下做到這一點？

Answer 1

問題是透明標題。

如果它是透明的，然後你會看到身體裏面的東西它滾動...

背景圖像是整個文件，而不僅僅是標題。

您應該真正將圖片拆分爲頭部150像素圖片和其他圖片沒有第一個150像素的圖片。

看看這個：http://jsfiddle.net/tTjVe/1/

#header-container{ 
    ... 
    ... 
    background: url("http://www.webdesign.org/img_articles/20024/110.jpg") no-repeat top center fixed; 
    background-size: 100% 150px; 
} 

的小提琴被使用相同的整體背景圖像頭和身體太...只是一分爲二，它，你會好起來的。