Изменить непрозрачность бутстрапа navbar не текст

Question

Как изменить непрозрачность моего навигатора без изменения текста?

Вот как я реализовал свою Navbar:

<div class="navbar-wrapper"> 
    <div class="container"> 
    <div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <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"> 
      <li class="active"><a href="#home_page">Home</a></li> 
      <li><a href="#about_page">About</a></li> 
      <li><a href="#portfolio_page">Portfolio</a></li> 
      <li><a href="#contact_page">Contact</a></li> 
      </ul> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </div> 

Answer 1

можно добавить фон RGBA значение цвета для элемента, который вы хотите изменить непрозрачность.

JSFiddle example

Я добавил это в CSS:

.navbar-wrapper { 
    background: rgba(0,0,0,0.2); 
} 

Это создает фон с непрозрачностью. Вы можете изменить цвет на все, что вам нужно. Вот ссылка цвета rgba: http://cloford.com/resources/colours/500col.htm

Вы также можете просто выполнить поиск Google для значения цвета фона, которое вы используете в настоящее время, и найти сопоставимое значение rgba.