css使引導程序導航欄透明

我使用引導程序，並在我的html文件中有一個導航欄我想使此導航欄透明顯示背景圖像。有人可以教我如何用CSS做到這一點？我試了下面的css什麼都沒發生css使引導程序導航欄透明

.navbar-inner { 
    background-color:transparent; 
} 

<div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="navbar-inner"> 
        <div class="container"> 
         <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <a class="brand" href="#">lol</a> 
         <div class="nav-collapse collapse"> 
          <ul class="nav pull-right"> 
           <li class="active"><a href="/">Home</a></li> 
           <li><a href="about">About</a></li> 
          </ul> 
         </div> 
        </div> 
      </div> 
     </div>

來源

2013-05-06 kun

請張貼鏈接或鏈接的jsfiddle方式 – ShibinRagh 2013-05-06 06:29:21

我是能夠使導航欄透明，加入了新的.transparent類到.navbar並設置CSS如下：

.navbar.transparent.navbar-inverse .navbar-inner { 
    border-width: 0px; 
    -webkit-box-shadow: 0px 0px; 
    box-shadow: 0px 0px; 
    background-color: rgba(0,0,0,0.0); 
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop(0% , rgba(0,0,0,0.00)),color-stop(100% , rgba(0,0,0,0.00))); 
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); 
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); 
}

我的標記是這樣的

<div class="navbar transparent navbar-inverse"> 
      <div class="navbar-inner">....

來源

2013-06-25 17:30:01 scottM

感謝...使用代碼'引導4'及其作品般的魅力:) – 2017-04-20 17:31:04

用background-image: none測試。該財產將刪除linear-gradient。

您可以在這裏看到的結果：http://jsfiddle.net/eugip9/8D36M/

來源

2013-05-06 06:44:10 Pigueiras

只需添加到您的CSS： -

.navbar-inner { 
    background:transparent; 
}

來源

2013-06-08 12:19:12

簡單的解決方案+1！ – Nikhil 2014-03-28 06:51:23

你們在做什麼是不必要的。

對於透明背景，簡單地做到：

<div class="navbar"> 
 
// your navbar content 
 
</div>

而不類導航欄默認或Navbar的倒數。

來源

2015-03-21 10:42:15

這將爲計劃'nav'元素，然而與引導框架的默認樣式的工作包括背景漸變，其中OP是尋找去除。 – 2015-03-21 11:03:05

如果您使用的是最新版本的引導和Ruby on Rails的，你可以在html.erb文件鍵入像這樣：

<nav class="navbar navbar-transparent">

這就是你所需要的。

來源

2015-06-21 01:42:19

除了Jochem Stoel的回答......我在DIV標籤的類中添加了'navbar-fixed-top'，它工作正常。

來源

2015-09-18 16:34:14

只是離開默認導航欄內置的引導工作正常。
你只需要添加下面的自定義CSS，這樣一切仍然正常，因爲它應該。

HTML：

<nav class="navbar navbar-default">

CSS：

.navbar-default { 
    background-color: transparent; 
}

來源

2016-01-05 23:42:57

<nav class="navbar navbar-fixed-top navbar-light" style="background-color: transparent;"> 

<!--This should work just fine. it will make it transparent. hope i helped!-->

來源

2016-10-05 12:29:06

雖然此代碼片段可能會解決問題，但[包括解釋]（http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）確實有助於提高帖子的質量。請記住，您將來會爲讀者回答問題，而這些人可能不知道您的代碼建議的原因。 – andreas 2016-10-09 07:51:45

CSS代碼：

.header .navbar-default { 
    background: none; 
}

HTML代碼：

<header> 
    <nav class="navbar navbar-default"></nav> 
</header>

來源

2016-11-11 18:22:21

沒有必要把這一切搞亂。

你可以不寫navbar-default或 navbar-inverse

<nav class="navbar"> //Don't add navbar-default to the class 

    // 

</nav>

來源

2017-01-25 07:18:56

在你的代碼試試這個讓導航欄透明，它爲我工作 -

給一個ID，元素，對此您需要根據您的代碼，使透明

的如 -

<div class="navbar-inner" id="nav1">

然後在你的CSS-

#nav1 
{ 
    background-color:#F00; /*whichever you want*/ 
    opacity: 0.5;   /*0.5 determines transparency value*/ 
    filter:(opacity=50);  
}

來源

2017-05-25 09:12:08 trex1999

在引導3.3.7（和4.0大概）應用此，這個工程：

代替：

<nav class="navbar navbar-inverse navbar-fixed-top">

使用：

<nav class="navbar bg-transparent navbar-fixed-top">

不需要CSS！

來源

2018-02-01 16:32:14 wla312

css使引導程序導航欄透明

回答

相關問題