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); 
} 

希望这有助于！