css 使引导导航栏透明答案

【问题标题】：css to make bootstrap navbar transparentcss 使引导导航栏透明
【发布时间】：2013-04-29 20:47:43
【问题描述】：

我使用引导程序，并且我的 html 文件中有一个导航栏，我想让这个导航栏透明以显示背景图像。有人可以教我如何用css做到这一点吗？我尝试了以下 css 没有发生任何事情

.navbar-inner {
    background-color:transparent;
}

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                    <div class="container">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="brand" href="#">lol</a>
                        <div class="nav-collapse collapse">
                            <ul class="nav pull-right">
                                <li class="active"><a href="/">Home</a></li>
                                <li><a href="about">About</a></li>
                            </ul>
                        </div>
                    </div>
            </div>
        </div>

【问题讨论】：

请张贴链接或jsfiddle链接

标签： css twitter-bootstrap

【解决方案1】：

只需添加 背景色：rgb(255, 255, 255, 0);

到你的导航栏类

【讨论】：

【解决方案2】：

这适用于 4.0。

<nav class="navbar navbar-expand-sm fixed-top navbar-light">
or
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">

关键项是fixed-top，否则即使有图片顶部也会显示白色或默认页面背景。 navbar-light 显示深色文字，navbar-dark 显示浅色文字。

【讨论】：

【解决方案3】：

<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-transparent">
              <a class="navbar-brand" href="#">Navbar w/ text</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav mr-auto">
                  <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                  </li>
                </ul>
                <span class="navbar-text">
                  Navbar text with an inline element
                </span>
              </div>
            </nav>

【讨论】：

您能否为您的答案提供更多背景信息，它的作用是什么？为什么它有效？所以其他人可以从中学习。请考虑查看How to Answer
这是透明引导导航栏的代码。您可以简单地复制粘贴我的代码并享受。上面提到的答案对我没有帮助，遇到同样问题的人可以试试这段代码。

【解决方案4】：

2019 年更新

Bootstrap 4 - 导航栏默认是透明的

这里的大多数答案都具有误导性，因为它们与 Bootstrap 3 相关。默认情况下，Bootstrap 4 导航栏是透明的。请记住使用navbar-light 或navbar-dark，以便链接颜色与背景颜色的对比度相匹配...

https://www.codeply.com/go/FTDyj4KZlQ

<nav class="navbar navbar-expand-sm fixed-top navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

【讨论】：

我不想有一个透明的导航栏，我正在使用 bootstrap 4。我该怎么办？

【解决方案5】：

一种解决方法是为导航栏容器提供“固定顶部”类，然后将固定顶部样式更改为“位置：绝对”；

代码如下：

    <header class="nav-wrapper">
      <div class="container fixed-top">
        <nav class="navbar">
        </nav>
      </div>
    </header>

.fixed-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

【讨论】：

【解决方案6】：

将 bg-transparent 类添加到导航栏。

<div class="bg-primary">
    <div class="navbar navbar-dark bg-transparent">
         ...
    </div>
</div>

【讨论】：

【解决方案7】：

对于 Spring + Thymeleaf (boostrap) 项目我通常使用：

在css里面有如下代码

.navbar-inner {
        background:transparent;
    }

在 HTML 内一行

<nav class="navbar-inner">

【讨论】：

【解决方案8】：

如果您使用的是最新版本的Bootstrap，即4.0.0，您只需使用“透明”关键字：

<nav class="navbar navbar-light transparent">

根本不需要为此应用任何 css，因为 bootstrap 已内置此属性。

【讨论】：

【解决方案9】：

在 bootstrap 3.3.7（大概是 4.0）中，这可行：

代替：

<nav class="navbar navbar-inverse navbar-fixed-top">

使用：

<nav class="navbar bg-transparent navbar-fixed-top">

无需 CSS！

【讨论】：

【解决方案10】：

在你的代码中试试这个，它对我有用 -

为要使其透明的元素指定一个 id

例如根据您的代码-

<div class="navbar-inner" id="nav1">

然后在你的 css 中应用它-

#nav1
{  
    background-color:#F00;  /*whichever you want*/
    opacity: 0.5;           /*0.5 determines transparency value*/ 
    filter:(opacity=50);       
}

【讨论】：

【解决方案11】：

不需要这么乱。

您可以通过不写navbar-default或使导航栏透明 navbar-inverse

<nav class="navbar">  //Don't add navbar-default to the class

  //

</nav>

【讨论】：

【解决方案12】：

CSS 代码：

.header .navbar-default {
  background: none;
}

HTML 代码：

<header>
    <nav class="navbar navbar-default"></nav>
</header>

【讨论】：

【解决方案13】：

<nav class="navbar navbar-fixed-top navbar-light" style="background-color: transparent;">

<!--This should work just fine. it will make it transparent. hope i helped!-->

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【解决方案14】：

只保留引导程序内置的默认导航栏就可以了。
您只需要在下面添加自定义 css，这样一切仍然可以正常工作。

HTML：

<nav class="navbar navbar-default">

CSS：

.navbar-default {
    background-color: transparent;
}

【讨论】：

【解决方案15】：

进一步了解 Jochem Stoel 的回答......我在 DIV 标签的类中添加了“navbar-fixed-top”并且它起作用了。

【讨论】：

【解决方案16】：

如果您使用的是最新版本的 Bootstrap 和 Ruby on Rails，您只需在 html.erb 文件中键入：

<nav class="navbar navbar-transparent">

这就是你所需要的。

【讨论】：

【解决方案17】：

你们的所作所为是不必要的。

对于透明背景，只需：

<div class="navbar">
// your navbar content
</div>

没有类 navbar-default 或 navbar-inverse。

【讨论】：

这适用于计划 nav 元素，但是 Bootstrap 框架的默认样式包括背景渐变，OP 希望删除它。

【解决方案18】：

我可以通过向 .navbar 添加一个新的 .transparent 类并像这样设置 CSS 来使导航栏透明：

 .navbar.transparent.navbar-inverse .navbar-inner {
    border-width: 0px;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    background-color: rgba(0,0,0,0.0);
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}

我的标记是这样的

<div class="navbar transparent navbar-inverse">
            <div class="navbar-inner">....

【讨论】：

谢谢...将您的代码与Bootstrap 4 一起使用，它的作用就像魅力:)
这仅在提出问题时与 Bootstrap 3 相关。因为导航栏已经是透明的，所以不需要 Bootstrap 4

【解决方案19】：

只需将其添加到您的 css 中：-

.navbar-inner {
    background:transparent;
}

【讨论】：

更简单的解决方案 +1！

【解决方案20】：

使用background-image: none 进行测试。该属性将删除linear-gradient。

你可以在这里看到结果：http://jsfiddle.net/eugip9/8D36M/

【讨论】：