Bootstrap透明導航條

Question

我想讓navbar透明有點像this。但我似乎無法讓它工作。我在navbar類中添加了rga（0,0,0,0.5）。

Answer 1

我只是想通了。對於任何未來需要此功能的人。我添加了一個CSS覆蓋以：

.navbar.transparent.navbar-inverse .navbar-inner { 
    background: rgba(0,0,0,0.4); 
} 

而且我的HTML語法如下：

<div class="navbar transparent navbar-inverse navbar-fixed-top"> 
    <nav class="navbar-inner"> 
    ... 
    </div> 
</div> 

Answer 2

首先，我認爲你有錯誤的語法爲RGB或RGBA你寫

rga(0,0,0,0.5) 

實際上它應該是

rgba(0,0,0,0.5); 

讓我們以此爲例：

HTML

<div class="navbar"> 
    <ul> 
    <li>Menu1</li> 
    <li>Menu2</li> 
    </ul> 
</div> 

CSS

.navbar { 
    background: rgba(0,0,0,0.5); 
    } 

我也建議有一個後備的顏色，以防瀏覽器的人使用是不支持它。

CSS後備

.navbar { 
     background: rgb (0,0,0); 
    } 

Answer 3

你甚至可以使用這樣

.navbar-default { 
    background: none; 
} 

或

.navbar { 
    background: none; 
} 

你會得到透明背景。

Answer 4

對於透明的導航欄來說，這非常簡單。在CSS文檔中，您可以執行以下三件事之一。答：簡單的方法，但你不用這種方法學得太多。您可以從字面上輸入導航欄背景透明的CSS文檔。相當簡單：

.navbar 
{ 
    background-color: transparent; 
} 

B.可以間接設置爲RGBA背景顏色的東西alpha通道中的R，G，和B 0和1之間協調控制紅色，綠色和藍色像素。 A或alpha通道控制不透明度/透明度。對於R，G和B，您可以輸入介於0和255之間的值。但是，對於A alpha通道，您必須輸入介於0和1之間的值。1表示它完全不透明（不透明，又名完全可見），0表示它完全透明（不可見）。爲alpha通道設置不同的值可以幫助您確定您希望導航欄的透明度。如果您將導航欄設爲固定頂部導航欄，並且在整個網頁中使用不同的背景顏色，則非常有用。

哦，談到顏色......還有更多。

您可以更進一步。如果您希望導航欄透明並具有淺色/白色色調，則可以執行以下操作。

.navbar 
{ 
    /* White tint with 0.5 opacity. */ 
    background-color: rgba(255,255,255,0.5); 
    /* Notice how RGB of 255,255,255 is white. */ 
} 

或者，如果你希望你的導航欄是透明的具深色的，黑的色調，你可以做到以下幾點：

.navbar 
{ 
    /* Example with a black tint and 0.5 opacity. */ 
    background-color: rgba(0,0,0,0.5); 
    /* RGB of 0,0,0 is black. */ 
} 

現在，如果你想給你的透明導航欄，例如，一個綠色的色調，亂七八糟的綠色價值！對於紅色，請使用R值。對於藍色，請使用B值。對於＃008f00的RGB十六進制綠色，或（0,143,0），這將是這樣的：

.navbar 
{ 
    /* Green tint of RGB 0,143,0, and with 0.5 opacity. */ 
    background-color: rgba(0,143,0,0.5); 
} 

希望這有助於！