如何通過透明導航欄使橫幅圖像可見？

我已經用Bootstrap編寫了以下代碼4.在下面的圖片中，我描述了我想要實現的內容。謝謝！如何通過透明導航欄使橫幅圖像可見？

<style> 
     div.jumbotron { 
      background: #458392 url("img/banner.jpg") no-repeat right; 
     } 

     nav.navbar { 
      background: rgba(69, 131, 146, 0.4); 
     } 
    </style> 

<body> 

<nav class="navbar navbar-toggleable-sm navbar-inverse"> 
    /*some code*/ 
</nav> 

<div class="jumbotron jumbotron-fluid text-white"> 
    /*some code*/ 
</div> 

</body>

來源

2017-05-29 Rusletov

http://xomisse.com/blog/make-navigation-bar-other-blog-elements-partially-transparent/ – tech2017

我已經使用了opacity屬性和rgba值。它沒有幫助。導航欄的顏色變得更輕，就這些了。我需要的是通過導航欄使橫幅圖像可見。 – Rusletov

你嘗試過改變z-index嗎？ – tech2017

如果我知道它的正確性，您需要將導航欄實際放在橫幅上。目前他們只是彼此相鄰。嘗試調整位置 - 絕對或固定。

來源

2017-05-29 18:57:31

你說得對。我是bootstrap的新手，所以我不知道如何使用它進行編碼。現在我已經將navbar元素放在橫幅上，幾乎得到了我想要的。 – Rusletov

如何通過透明導航欄使橫幅圖像可見？

回答

相關問題