logo标签列表

如何使用CSS使Bootstrap导航栏透明

csstwitter-bootstrap
48

我使用Bootstrap，我的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链接。 - ShibinRagh
20个回答
73

只需将以下内容添加到您的 CSS 中：

.navbar-inner {
    background:transparent;
}
56

你们正在做的是不必要的。

要实现透明背景，只需进行以下操作：

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

没有使用class为navbar-default或navbar-inverse的情况。

3
这将适用于计划中的 nav 元素，然而 Bootstrap 框架的默认样式包括一个背景渐变，而 OP 希望去掉这个渐变。 - Rory McCrossan
31

我通过将新的.transparent类添加到.navbar并设置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">....
1
谢谢...使用您的代码与Bootstrap 4一起，它非常完美地运行 :) - Mohammed Sufian
这仅适用于提问时的Bootstrap 3。对于Bootstrap 4，这不是必需的，因为Navbar已经是透明的。 - Carol Skelly
19
如果您正在使用最新版本的Bootstrap和Ruby on Rails，您只需要在html.erb文件中键入如下内容:
<nav class="navbar navbar-transparent">

那就是你所需要的一切。

18

更新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。我该怎么办？ - Shahriar.M
8

没有必要这样麻烦。

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

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

  //

</nav>
5
将 bg-transparent 类添加到导航栏中。
<div class="bg-primary">
    <div class="navbar navbar-dark bg-transparent">
         ...
    </div>
</div>
3

在Bootstrap 3.3.7（以及可能的4.0版本）中，这样做是有效的：

而不是：

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

用途：

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

不需要CSS！
3

CSS代码：

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

HTML 代码：

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

仅使用Bootstrap默认的导航栏即可正常工作。
您只需要添加下面的自定义CSS，这样一切都能按照预期工作。

HTML：

<nav class="navbar navbar-default">

CSS（层叠样式表）：
.navbar-default {
    background-color: transparent;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接