css - Bootstrap 透明导航栏

Question

我正在尝试使导航栏透明有点像这样。但我似乎无法让它工作。我已经rga(0,0,0,0.5)在navbar课堂上添加了。

score 20 · Accepted Answer

我刚刚想通了。对于将来需要这个的任何人。我添加了一个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>

score 7 · Accepted Answer

你甚至可以像这样使用

.navbar-default {
  background: none;
}

或者

.navbar {
  background: none;
}

你会得到透明的背景。

score 6 · Accepted Answer

对于一个透明的导航栏，这很容易。在 CSS 文档中，您可以做以下三件事之一。

A. 简单的方法，但你不会用这种方法学到太多东西。您可以直接在 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 green 值！对于红色，弄乱 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);
}

希望这可以帮助！

score 5 · Accepted Answer

我不确定这是最近添加的内容，但在 Bootstrap v4.5 中，您只需将bg-transparent类名添加到导航栏的类属性中，如下所示：

<nav class="navbar navbar-expand-lg navbar-light bg-transparent">

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

score 4 · Accepted Answer

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

score 1 · Accepted Answer

对于引导程序 5.1，您可以尝试添加

jQuery(window).scroll(function () {
    var top = jQuery(document).scrollTop();
    var height = 200;

    if (top > height) {
        //sticky-top or fixed-top
        jQuery('.sticky-top').addClass('bg-opacity-75');
    } else {
        jQuery('.sticky-top').removeClass('bg-opacity-75');
    }
});

score 1 · Accepted Answer

显然，如果您有多个 .navbar，您通常不能只为它们设置样式，因为它们是很好的按钮管理器，并且您可以创建一个水平到垂直的翻转导航栏以供移动使用。

以下屏幕截图显示，如果您删除“bg-dark”并且什么都不做，那么导航栏应该显示为透明的。

如果没有，则使用 Chrome 调试工具查找和检查有色元素。这就是您可能想要将 id="my-element" 添加到该 html 标记的地方。然后在 CSS 文件中，使用背景设置 #my-element 样式：透明。

由于某种原因，我无法添加一个 id 并使用 bg-dark 设置该 id 的样式。因此，如果您遇到问题，只需从有色项目的类别列表中删除 bg-dark 即可。

score 0 · Accepted Answer

考虑到你的代码是这样的

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

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

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

score 0 · Accepted Answer

对于 Bootstrap 5，只需从导航栏中删除 ' bg ' 属性或将其设置为空字符串：

<Navbar bg="">

正如@PenAndPaperMathematics 之前提到的，通过删除'bg-dark'

score 0 · Accepted Answer

<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light"></nav>

当使用bg-light 更改样式如下

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

css - Bootstrap 透明导航栏

10 回答 10

Related

Reference