導航欄不透明問題

我正在使用bootstrap構建我的第一個站點。我有一個反向（黑色）欄，沿着頁面的頂部運行，這是我的導航欄。在筆記本電腦上看起來很棒，但導航欄在小屏幕上垂直放置，覆蓋了我具有的響應背景圖像（一件藝術作品）。我希望頂部的黑色條紋具有足夠的不透明性，以允許背景圖像閃耀一點。我已經搜索了這個主題，但是我之前回復的任何內容都沒有成功。導航欄不透明問題

如何後臺部署：

導航欄定義：

<nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
     <a class="navbar-brand" style="font-family: 'Oswald', sans-serif" href="#">SITE TITLE</a> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href=#>Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Gallery</a></li> 
      <li><a href="#">Events</a></li> 
      <li><a href="#">Purchase</a><li> 

      </div>

來源

2016-12-13 Ryan Turner

大。所以我們在提交帖子後無法編輯我們的錯誤？ –

是的，你可以。在左下角有一個按鈕。 – Device

你嘗試過使用CSS不透明度：0.5;'？ – nurdyguy

應用background-image到body而非html，然後使用RGBA（http://www.w3schools.com/cssref/css_colors_legal.asp）通過使用創建一個半透明background-colour alpha通道，而不是使用opacity。您可以在媒體查詢中執行此操作，以使其僅適用於較小的屏幕設備。

注：應用不透明度爲您nav影響的子元素太多，所以你ul，包括導航文本也將變成半透明。使用rgba只會影響選定類的背景的透明度。

試試這個： https://jsfiddle.net/3mkajcus/1/

來源

2016-12-14 10:27:21

導航欄不透明問題

回答

相關問題