Прозрачный цвет Bootstrap-3 Navbar

У меня возникла проблема с настройкой прозрачности прозрачности или цвета непрозрачности bootstrap3. Я ничего не изменил в bootstrap.css или bootstrap-theme.css В моем меню я пытаюсь поместить изображение под ним и установить цвет в черно-прозрачный или черный с непрозрачностью, как здесь: http://i.imgur.com/f9NNwtD.png Вы можете видеть, что количество непрозрачности не очень велико, но это так, и я должен сделать что-то подобное. Когда я что-то меняю, цвет меняет белый цвет, поэтому, пожалуйста, помогите мне.

Код ниже:

<div class="navbar transparent navbar-inverse navbar-static-top hr">
    <div class="navbar-brand logo"></div>
    <div class="navbar-brand-right">
    </div>
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav mineul" style="font-size:17px;margin-top:9px; color:white;">
              <li><a href="#">Test1</a></li>
               <li><a href="#">Test1</a></li>
               <li><a href="#">Test1</a></li>
            </ul>

        </div>
    </div>
</div>

И bootply: http://bootply.com/106966

Ответы

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

.navbar li { color: #000 } 

.navbar {
   background:rgba(0,0,0,0.5);   /* for latest browsers */
   background: #000;  /* fallback for older browsers */
}

 .navbar-default {
      background-color:transparent !important;
      border-color:transparent;
      background-image:none;
      box-shadow:none;  
 }

  .navbar-default .navbar-nav>li>a {
     font-size:20px; 
     color:#fff; 
 }