背景覆蓋在引導

Question

我的代碼我的超大屏幕：

<!-- Navbar --> 
<nav class="navbar navbar-fixed-top" id="my-navbar"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="" class="navbar-brand"><img style="max-width:100px; margin-top: -7px;" src="images/firma-Edgar-Ayales.png" alt=""></a> 
     </div> 
     <!--End navbar-header--> 
     <div class="collapse navbar-collapse navbar-right" id="navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#portfolio">Feedback</a> 
      <li><a href="#features">Gallery</a> 
      <li><a href="#gallery">Features</a> 
      <li><a href="#feedback">Faq</a> 
      <li><a href="#contact">ContactUs</a> 
     </ul> 
     </div> 
     <div> 
     </div> 
    </div> 
    <!-- End container --> 
</nav><!-- End navbar --> 

<div class="jumbotron"> 
    <div class="container"> 
     <h1>Transformamos tus ideas en atractivos diseños</h1> 
    </div> 
</div> 

文字越來越背景後面。我想讓我的網頁的第一部分成爲背景，包括導航欄。 CSS是：

.navbar { 
    background: rgba(0, 0, 0, 0); 
    font-size: 10pt; 
    text-transform: uppercase; 
} 

.navbar-nav > li > a { 
    color: white; 
    font-family: "Tahoma", sans-serif; 
    font-weight: bold; 
} 

#my-navbar { 
    background: url(images/bgfix.jpg) no-repeat; 
    height: 700px; 
    background-size: cover; 
    background-position: center; 
    position: absolute; 
} 

#titulobg { 
    text-align: center; 
    padding-top: 450px; 
    color: black; 
    font-family: "Nunito", sans-serif; 
} 

.jumbotron { 
    color: white; 
    text-shadow: black 0.3em 0.3em 0.3em; 
    background: transparent; 
} 

此外，當我嘗試添加一個新的div來添加文本，它會背後的背景。

Answer 1

我假設你從「navbar」擴展「my-navbar」。它繼承了所有navbar的屬性，包括一個高z-索引。 z-index只是告訴瀏覽器什麼重疊。低Z指數用於背景，高Z指數用於前景。

#my-navbar{ 
    background:url(images/bgfix.jpg) no-repeat; 
     height: 700px; 
     background-size: cover; 
     background-position: center; 
     position: absolute; 
     z-index: -1; 
    } 

編輯： 用相對位置來

#my-navbar{ 
     background:url(images/bgfix.jpg) no-repeat; 
      height: 700px; 
      background-size: cover; 
      background-position: center; 
      position: relative; 
      z-index: -1; 
     } 

編輯2：爲了在頂部取出煩人白色絕對巴。

body { 
    padding-top: 0px; 
}