如何使Twitter Bootstrap导航栏透明？

Question

我正在尝试使我的Bootstrap navbar 透明。我正在使用Bootstrap 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 -->

- kdr

---

请问您能否将所有的CSS都包含进来吗？因为根据您提供的代码，它似乎可以正常工作。我猜测.navbar-inverse样式被CSS中的其他内容覆盖了。这是一个演示它正常工作的Codepen链接：http://codepen.io/anon/pen/ZGYvWx - Zac.Ledyard

根据 @Zac.Ledyard 的要求，已添加完整的 CSS。 - kdr

有趣的是，这个链接对我来说似乎仍然有效：http://codepen.io/anon/pen/ZGYvWx - Zac.Ledyard

Answer 1

如果你仍然遇到问题，我建议重新开始并使用这个：这很简单和直接了当。不要给 navbar 添加另一个类，这只是一个建议。此外，你可以替换 Bootstrap CSS 和 JS 的 链接。这只是 CDN 链接。如果你感兴趣，这里是输出。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<style type="text/css">
    body{
        background-image: url('http://seamlesspatternchecker.com/hash/seamless-pattern-samples/a/3/5/a35-vector-vector-seamless-simple-pattern-curtain-design-modern-stylish-texture-repeating-abstract-158117696.jpg');
    }

    .navbar{
        border: none;
        border-radius: 0;
        background-color: rgba(0,0,0,0.5);
    }
</style>

<body>
    <nav class="navbar 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="#">Brand</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
</body>

- jofftiquez

Answer 2

在您的网站部分中，将您的新自定义CSS文件加载在默认的Bootstrap样式表之后。

<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>

在你的custom.css文件中。

.navbar {
    background-color: transparent;
    background: transparent;
    border-width: 0px;
}

- BM_tron

Answer 3

试试这个：

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

.navbar li { color: #000 }

更新： 在CSS的第二行中将：<nav class="navbar navbar-transparent navbar-inverse">替换为<nav class="navbar navbar-transparent">

可能的答案：

Bootstrap-3导航栏透明颜色

CSS使Bootstrap导航栏透明

- ptCoder

---

检查更新：将 <nav class="navbar navbar-transparent navbar-inverse"> 替换为 <nav class="navbar navbar-transparent">。 - ptCoder

尝试更新了...现在得到了白色的导航栏。谢谢你的努力，但还有其他问题@ptCoder。 - kdr

尝试添加以下内容：.navbar-inner { background:transparent; } - ptCoder

导航栏变成了白色。 - kdr

白色还是透明的？ - ptCoder

添加了新的导航栏..它是白色的。 - kdr

Answer 4

这是我的CodePen，我尝试使导航栏透明且响应式。希望对你有所帮助。

<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
  <span class="glyphicon glyphicon-chevron-right" style="color:white;"></span>

  </button>

您可以在这里找到其余的代码

- hanxO