我如何覆蓋導航欄上的圖像？

我想簡單地使圖像覆蓋導航欄，但我現在很困惑如何做到這一點。我如何覆蓋導航欄上的圖像？

圖片

目前導航欄和所述圖像是獨立的，如果可能的話我想要導航欄的背景爲圖像以及

HTML代碼

<!-- Navigation --> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Start Bootstrap</a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li> 
         <a href="#about">About</a> 
        </li> 
        <li> 
         <a href="#services">Services</a> 
        </li> 
        <li> 
         <a href="#contact">Contact</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 

    <!-- Full Width Image Header --> 
    <header class="header-image"> 
     <div class="headline"> 
      <div class="container"> 
       <h1>join our movement!</h1> 
       <!-- <h3>Join Now</h3> --> 
       <button class="btn btn-success btn-lg">Join Now</button> 
       <!-- <button type="button" class="btn btn-primary btn-md">Medium</button> --> 
      </div> 
     </div> 
    </header>

Css代碼

.header-image { 
    display: block; 
    width: 100%; 
    height: auto; 
    text-align: center; 
    background-image: url("/images/cloud6.jpg"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
}

來源

2016-07-03 sinusGob

使用z-index和定位，然後設置不透明度以便透視？ – Li357

設置導航欄類背景透明.navbar { background : transparent; }

設置了負餘量像下面的標題圖片; .header-image { margin-top : -40px};作爲示例

來源

2016-07-03 15:37:58

試過了，但圖像並沒有掩蓋背景，儘管 – sinusGob

您可能想爲標題圖像添加負頂部邊距，但我會更新我的答案並查看它是否有效 –

謝謝，它完美地工作。 – sinusGob

您可以嘗試將導航欄放入標題圖像，並且設置導航欄的背景爲無或透明。

<header class="header-image"> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    ... 
    </nav> 
    <div class="headline"> 
     <div class="container"> 
      <h1>join our movement!</h1> 
      <!-- <h3>Join Now</h3> --> 
      <button class="btn btn-success btn-lg">Join Now</button> 
      <!-- <button type="button" class="btn btn-primary btn-md">Medium</button> --> 
     </div> 
    </div> 
</header>

祝你好運！

來源

2016-07-03 15:39:56

我做到了這一點，但圖像不包括導航欄，而是它變成了白色 – sinusGob

我試圖設置背景導航欄相同的標題圖像，並使導航欄重疊標題圖像在頂部，向下滾動時，不需要再次設置導航欄的背景。 –

我如何覆蓋導航欄上的圖像？

回答

相關問題