Question

我正在尝试使导航栏像this一样透明。但我似乎无法让它发挥作用。我在rga(0,0,0,0.5)课程中添加了navbar。

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

你甚至可以像这样使用

.navbar-default {
  background: none;
}

或

.navbar {
  background: none;
}

你会得到透明的背景。

Answer 3

首先，我认为您编写的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 4

spec:
  template:
    spec:
      nodeSelector:
        kubernetes.io/hostname: node-2

使用<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light"></nav>时更改样式如下

bg-light

Answer 5

对于透明导航栏，它非常简单。在CSS文档中，您可以执行以下三种操作之一。

一个。简单的方法，但你不会用这种方法学到太多东西。您可以在CSS文档中输入导航栏背景透明的字面。很简单：

.navbar
{
    background-color: transparent;
}

B中。您可以间接将RGBA背景颜色的Alpha通道设置为0到1之间的值.R，G和B坐标分别控制像素的红色，绿色和蓝色。 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. */
}

现在，如果你想给你的透明导航栏，例如绿色色调，那么就把G绿色值搞得一团糟！对于红色，乱七八糟的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);
}

希望这有帮助！

Answer 6

我不确定这是最近添加的内容，但是在Bootstrap v4.5中，您只需要将firebase emulators:start --import=./mock_up_data/production_data_export/类名添加到导航栏的class属性中，就像这样：

bg-transparent

这是有关色彩实用程序类的Bootstrap文档：https://getbootstrap.com/docs/4.5/utilities/colors/#background-color

Answer 7

认为你的代码是这样的

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" fixed="top">
</Navbar>

只需将以下代码添加到您的 CSS 中即可

.bg-dark {
    background-color: transparent !important;
}

Bootstrap透明导航栏

7 个答案: