Boostrap navbar-default transparent

Question

我的网站有问题。我使用bootstrap来响应使用，我有一个导航栏，我希望我的背景能够透明地看到内部。

目前我有：that 我的背景不是全高度

我想要Like that

你有什么想法吗？

HTML：                                                          

    <header>
      <div class="header-content">
        <div class="header-content-inner">
            <h1>Lorem ipsum</h1>
        </div>
       </div>
   </header>
</body>

和css：

html, body
{
   height: 100%;
   width: 100%;
}

.navbar
{
    height: 70px;
}
.navbar-default
{
   background-color: transparent;
   border-color: rgba(255,255,255,.3);
   border-radius: 0;
}

header {
    position: relative;
    width: 100%;
    min-height: 100%;
    text-align: center;
    color: #fff;
    background-image: url(../img/bg.jpg);
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

header .header-content {
    position: relative;
    width: 100%;
    padding: 100px 15px;
    text-align: center;
}

抱歉我的英文。

Answer 1

我认为这就是你要找的东西。

opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */

https://jsfiddle.net/ftaqk4u6/7/