【发布时间】：2015-04-27 16:07:45
【问题描述】：
我正在尝试使我的引导程序 navbar 透明。我正在使用引导程序navbar-inverse 并尝试通过rgba() 添加不透明度。我希望我的导航栏是透明的，如下图所示：
@font-face {
font-family: FuturaBook;
src: url('fonts/FuturaStd-Light_1.otf');
}
body{
font-family: 'FuturaBook', Arial, sans-serif;
}
/***************************************************************************
Navigation Bar
****************************************************************************/
.navbar-inverse{
background-color: rgba(34, 34, 34, 0.5);
border-bottom: none;
}
.navbar-header{
width:100%;
height: 90px;
}
.navbar-header #brand{
font-family: 'FuturaBook', Arial, sans-serif;
color: white;
font-size: 20pt;
margin-top: 20px;
text-transform: uppercase;
}
.mynav li
{
list-style: none;
display: inline-block;
border-left: 1px solid white;
padding-top: 36px;
padding-left: 10px;
padding-right: 10px;
/* margin-top: 16px; */
height: 90px;
}
.mynav li:last-child{
border-right: 1px solid white;
}
.mynav li a{
color:white;
}
.mynav li a:hover{
text-decoration: none;
}
/* .mynav li a:active{
background-color: black;
}*/<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<nav class="navbar navbar-transparent navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="brand">Fashion Garage</a>
<div class="mynav pull-right">
<ul>
<li><a href="">TRENDS</a></li>
<li><a href="">PRODUCTS</a></li>
<li><a href="">DESIGNERS</a></li>
<li><a href="">MEMBERS</a></li>
<li><a href="">SEARCH</a></li>
<li><a href="">MY ACCOUNT</a></li>
</ul>
</div><!-- /mynav -->
</div><!-- /navbar-header -->
</div><!-- /container -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/lady-1.jpg" alt="Lady-1">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/lady-2.jpg" alt="Lady-2">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</nav><!-- /nav -->
</div><!-- /wrapper -->【问题讨论】：
-
你能把你所有的CSS都包括进来吗？因为使用您提供的代码，它似乎工作正常。我猜想 .navbar-inverse 样式正在被您的 CSS 中的其他内容覆盖这是它的工作代码：codepen.io/anon/pen/ZGYvWx
-
按照您的要求添加了完整的 css @Zac.Ledyard
-
有趣，这里似乎仍然对我有用：codepen.io/anon/pen/ZGYvWx
标签： html css twitter-bootstrap