CSS Bootstrap 透明导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16453537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap transparent navbar
提问by moosilauke18
回答by moosilauke18
I just figured it out. For anyone who needs this in the future. I added a css override that was:
我只是想通了。对于将来需要此功能的任何人。我添加了一个 css 覆盖，它是：
.navbar.transparent.navbar-inverse .navbar-inner {
background: rgba(0,0,0,0.4);
}
And my html syntax looks like:
我的 html 语法如下所示：
<div class="navbar transparent navbar-inverse navbar-fixed-top">
<nav class="navbar-inner">
...
</div>
</div>
回答by viswanath608
You can even use like this
你甚至可以像这样使用
.navbar-default {
background: none;
}
or
或者
.navbar {
background: none;
}
You'll get transparent background.
你会得到透明的背景。
回答by Rishi
For a transparent navbar, it's pretty easy. In the CSS document you can do one of three things.
对于透明的导航栏，这很容易。在 CSS 文档中，您可以做三件事之一。
A. The easy way, but you don't learn too much with this method. You can literally type in the CSS document that the background of the navbar is transparent. Pretty simple:
A. 简单的方法，但你不会用这种方法学到太多。您可以直接在 CSS 文档中输入导航栏的背景是透明的。很简单：
.navbar
{
background-color: transparent;
}
B. You can indirectly set the alpha channel for the RGBA background color to something in between 0 and 1. The R, G, and B coordinates control the red, green, and blue of the pixels, respectively. The A, or alpha channel, controls the opacity/transparency. For the R, G, and B, you can input a value in between 0 and 255. However, for the A alpha channel, you must input a value in between 0 and 1. 1 means it is completely opaque (not transparent, aka fully visible), and 0 means it is completely transparent (invisible). Setting different values for the alpha channel can help you decide how transparent you want your navbar to be. Very useful if you make the navbar a fixed-top one and you have different background colors throughout your webpage.
B. 您可以将 RGBA 背景颜色的 Alpha 通道间接设置为介于 0 和 1 之间的值。R、G 和 B 坐标分别控制像素的红色、绿色和蓝色。A 或 alpha 通道控制不透明度/透明度。对于 R、G 和 B，您可以输入介于 0 和 255 之间的值。但是，对于 A alpha 通道，您必须输入介于 0 和 1 之间的值。1 表示它完全不透明（不透明，也称为完全可见），0 表示完全透明（不可见）。为 Alpha 通道设置不同的值可以帮助您决定导航栏的透明度。如果您将导航栏设为固定顶部导航栏并且整个网页具有不同的背景颜色，则非常有用。
Oh, and speaking of colors...there's more.
哦，说到颜色……还有更多。
You can take this a step further. If you want your navbar to be transparent and have a lighter/whitish tint, you can do the following.
您可以更进一步。如果您希望导航栏透明并具有更浅/白色的色调，您可以执行以下操作。
.navbar
{
/* White tint with 0.5 opacity. */
background-color: rgba(255,255,255,0.5);
/* Notice how RGB of 255,255,255 is white. */
}
Or, if you want your navbar to be transparent with a darker, blacker tint, you can do the following:
或者，如果您希望导航栏以更深、更黑的色调透明，您可以执行以下操作：
.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. */
}
Now, if you want to give your transparent navbar, for example, a green tint, mess around with the G green value! For red, mess around with the R value. For blue, mess around with the B value. For a hex green of #008f00, or (0,143,0) in RGB, it would be something like this:
现在，如果你想给你的透明导航栏，例如，绿色调，搞乱 G 绿色值！对于红色，请使用 R 值。对于蓝色，请使用 B 值。对于 #008f00 或 (0,143,0) RGB 中的十六进制绿色，它会是这样的：
.navbar
{
/* Green tint of RGB 0,143,0, and with 0.5 opacity. */
background-color: rgba(0,143,0,0.5);
}
Hope this helps!
希望这可以帮助！
回答by lozadaOmr
First I think you have the wrong syntax for RGB or RGBA you wrote
首先，我认为您编写的 RGB 或 RGBA 语法错误
rga(0,0,0,0.5)
When in fact it should be
实际上应该是
rgba(0,0,0,0.5);
Let take this for an example:
让我们以这个为例：
HTML
HTML
<div class="navbar">
<ul>
<li>Menu1</li>
<li>Menu2</li>
</ul>
</div>
CSS
CSS
.navbar {
background: rgba(0,0,0,0.5);
}
I would also suggest to have a fallback color, just in case the browser people be using doesn't support it.
我还建议使用后备颜色，以防万一人们使用的浏览器不支持它。
CSS Fallback
CSS 回退
.navbar {
background: rgb (0,0,0);
}
回答by Udeesha Induwara
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light"></nav>
when use bg-lightchange style as following
当使用bg-light更改样式如下
.bg-light {
background-color: transparent!important;
}
