我使用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>
答案 0 :(得分：56)
只需将此添加到您的CSS： -
.navbar-inner {
background:transparent;
}
答案 1 :(得分：51)
你们所做的事情是不必要的。
对于透明背景，只需执行：
<div class="navbar">
// your navbar content
</div>
没有类navbar-default或navbar-inverse。
答案 2 :(得分：26)
我可以通过向.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">....
答案 3 :(得分：18)
如果您使用的是最新版本的Bootstrap和Ruby on Rails，您只需在html.erb文件中输入：
<nav class="navbar navbar-transparent">
这就是你所需要的一切。
答案 4 :(得分：7)
不需要所有这些混乱。
您可以通过不写
navbar-default或更改来使导航栏变得透明navbar-inverse
<nav class="navbar"> //Don't add navbar-default to the class
//
</nav>
答案 5 :(得分：3)
将bg透明类添加到导航栏。
<div class="bg-primary">
<div class="navbar navbar-dark bg-transparent">
...
</div>
</div>
答案 6 :(得分：3)
CSS代码：
.header .navbar-default {
background: none;
}
HTML code：
<header>
<nav class="navbar navbar-default"></nav>
</header>
答案 7 :(得分：3)
在bootstrap 3.3.7（可能是4.0）中，这有效：
而不是：
<nav class="navbar navbar-inverse navbar-fixed-top">
使用：
<nav class="navbar bg-transparent navbar-fixed-top">
不需要CSS！
答案 8 :(得分：2)
只需使用bootstrap保留内置的默认导航栏即可 你只需要在下面添加自定义css，这样一切仍然可以正常工作。
HTML：
(uint32_t)(b-a)CSS：
<nav class="navbar navbar-default">
答案 9 :(得分：2)
更新2018
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>
答案 10 :(得分：1)
在你的代码中尝试这个，它对我有用 -
为要透明的元素提供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 :(得分：1)
这适用于4.0。
<nav class="navbar navbar-expand-sm fixed-top navbar-light">
or
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
关键项为 固定顶部 ，否则，即使有图像顶部，也会显示白色或默认页面背景。 导航栏浅色 给出深色字母， 导航栏浅色 显示浅色文字。
答案 12 :(得分：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!-->
答案 13 :(得分：1)
继Jochem Stoel的回答......我添加了“navbar-fixed-top＆＃39;到DIV标签的课程，它的工作。
答案 14 :(得分：0)
使用background-image: none进行测试。该属性将删除linear-gradient。
您可以在此处查看结果：http://jsfiddle.net/eugip9/8D36M/
答案 15 :(得分：0)
如果您使用的是最新版本的Bootstrap，4.0.0，则只需使用'transparent'关键字：
<nav class="navbar navbar-light transparent">
由于bootstrap内置了此属性，因此根本不需要为此应用任何css。
答案 16 :(得分：0)
对于 Spring + 胸腺（ boostrap ）项目，我通常使用：
在CSS内添加以下代码
.navbar-inner {
background:transparent;
}
HTML内的行
<nav class="navbar-inner">
答案 17 :(得分：0)
一种解决方法是为导航栏容器提供“固定顶部”类，然后将固定顶部样式更改为“ position：absolute”；
代码如下：
<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;
}
答案 18 :(得分：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>
答案 19 :(得分：0)
只需添加 背景颜色：rgb(255, 255, 255, 0);
到你的导航栏类