46

我使用引导程序，并且我的 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>
4

20 回答 20

73

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

.navbar-inner {
    background:transparent;
}
于 2013-06-08T12:19:12.683 回答
55

你们这些人正在做的事情是不必要的。

对于透明背景，只需执行以下操作：

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

没有类 navbar-default 或 navbar-inverse。

于 2015-03-21T10:42:15.760 回答
31

I was able to make the navigation bar transparent by adding a new .transparent class to the .navbar and setting the CSS like this:

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

My markup is like this

<div class="navbar transparent navbar-inverse">
            <div class="navbar-inner">....
于 2013-06-25T17:30:01.130 回答
19

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

<nav class="navbar navbar-transparent">

这就是你所需要的。

于 2015-06-21T01:42:19.103 回答
18

2019 年更新

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

这里的大多数答案都具有误导性，因为它们与 Bootstrap 3 有关。默认情况下，Bootstrap 4 Navbar 是透明的。只需记住使用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>
于 2018-03-13T13:57:29.520 回答
8

不需要所有这些混乱。

您可以通过不书写navbar-default或 navbar-inverse

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

  //

</nav>
于 2017-01-25T07:18:56.347 回答
5

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

<div class="bg-primary">
    <div class="navbar navbar-dark bg-transparent">
         ...
    </div>
</div>
于 2018-12-27T20:30:57.310 回答
3

CSS 代码：

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

HTML 代码：

<header>
    <nav class="navbar navbar-default"></nav>
</header>
于 2016-11-11T18:22:21.947 回答
3

在引导程序 3.3.7（大概是 4.0）中，这有效：

代替：

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

利用：

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

不需要CSS！

于 2018-02-01T16:32:14.243 回答
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显示浅色文本。

于 2020-09-09T11:26:09.107 回答
2

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

HTML：

<nav class="navbar navbar-default">

CSS：

.navbar-default {
    background-color: transparent;
}
于 2016-01-05T23:42:57.137 回答
2

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

为要使其透明的元素提供一个 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);       
}
于 2017-05-25T09:12:08.617 回答
1

除了 Jochem Stoel 的回答......我在 DIV 标签的类中添加了 'navbar-fixed-top' 并且它起作用了。

于 2015-09-18T16:34:14.437 回答
1 
<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!-->
于 2016-10-05T12:29:06.040 回答
0

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

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

于 2013-05-06T06:44:10.490 回答
0 

<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>

于 2020-07-10T11:12:43.940 回答
0

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

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

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

于 2018-05-18T04:36:06.670 回答
0

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

在css里面有以下代码

.navbar-inner {
        background:transparent;
    }

在 HTML 内的行

<nav class="navbar-inner">
于 2018-12-06T11:16:38.277 回答
0

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

这是代码：

    <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;
}
于 2019-09-11T10:18:09.500 回答
0

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

到你的导航栏类

于 2021-03-10T06:13:59.350 回答