如何让Twitter Bootstrap Navbar透明化？

Question

我正在尝试使我的引导程序navbar透明。我正在使用bootstrap navbar-inverse并尝试按rgba()添加不透明度。我希望我的导航栏透明，如下图所示：

＆＃13;

＆＃13;

@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;
}*/

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

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

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

Answer 3

试试这个：

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

.navbar li { color: #000 }

<强>更新 在CSS seconde行替换：<nav class="navbar navbar-transparent navbar-inverse">到<nav class="navbar navbar-transparent">

可能的答案：

Transparent color of Bootstrap-3 Navbar

css to make bootstrap navbar transparent

Answer 4

这是我的代码笔，我试图使导航栏透明和响应。希望它可以帮到你。

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

You can find the rest of the code here