使Navbar透明Bootstrap和剩余的颜色块

Question

首先：我一直试图让导航栏透明，查看如何在这里，但解决方案还没有完全奏效（或至少没有像我预期的那样）。我正在使用bootstrap，这是我的HTML：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
   <div class="navbar-inner">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Overview</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">List</a></li>
      </ul>
    </div>
   </div>
  </div>
</nav>

我在此自定义CSS中添加了将导航栏更改为透明：

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

}

CSS正确加载，但导航栏中没有任何变化（至少我认为它是白色的，因为浏览器背景是？）

我尝试在上面的CSS中更改背景颜色，它确实改变了它，但我得到了这个结果：

我想知道，即使我确实让它透明，我怎么摆脱那个底部边框（我以为我已经将边框宽度设置为0px），那边的那些黑块是什么。

谢谢！

Answer 1

使用.navbar的{​​{1}}类，因为Bootstrap具有.navbar-inner元素的背景。

.navbar

Answer 2

尝试在CSS中使用opacity: 0.5;。

Answer 3

你应该试试新的css3透明功能“rgba” - a代表alpha通道

http://www.css3maker.com/css-3-rgba.html