css, чтобы сделать bootstrap navbar прозрачным

Question

Я использую bootstrap, и у меня есть navbar в моем html-файле. Я бы хотел сделать эту навигационную панель прозрачной, чтобы показать фоновое изображение. Может ли кто-нибудь научить меня, как это сделать с помощью css? Я попробовал следующее css ничего не случилось

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

<div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="navbar-inner"> 
        <div class="container"> 
         <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <a class="brand" href="#">lol</a> 
         <div class="nav-collapse collapse"> 
          <ul class="nav pull-right"> 
           <li class="active"><a href="/">Home</a></li> 
           <li><a href="about">About</a></li> 
          </ul> 
         </div> 
        </div> 
      </div> 
     </div> 

Answer 1

Я был в состоянии сделать панель навигации прозрачным путем добавления нового .transparent класс в .navbar и настройку CSS следующим образом:

.navbar.transparent.navbar-inverse .navbar-inner { 
    border-width: 0px; 
    -webkit-box-shadow: 0px 0px; 
    box-shadow: 0px 0px; 
    background-color: rgba(0,0,0,0.0); 
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop(0% , rgba(0,0,0,0.00)),color-stop(100% , rgba(0,0,0,0.00))); 
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); 
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); 
} 

Моя разметка похожа на это

<div class="navbar transparent navbar-inverse"> 
      <div class="navbar-inner">.... 

Answer 2

Тест с background-image: none. Это свойство удалит linear-gradient.

Вы можете увидеть результат здесь: http://jsfiddle.net/eugip9/8D36M/

Answer 3

Просто добавьте это в ваш CSS: -

.navbar-inner { 
    background:transparent; 
} 

Answer 4

То, что вы делаете, не нужно.

Для прозрачного фона, просто сделать:

<div class="navbar"> 
 
// your navbar content 
 
</div>

без класса Navbar-умолчанию или NavBar-обратным.

Answer 5

Если вы используете последнюю версию Bootstrap и Ruby On Rails, вы можете просто ввести его в файле html.erb, как так:

<nav class="navbar navbar-transparent"> 

И это все, что вам нужно.

Answer 6

В дополнение к ответу Йохема Стола ... Я добавил «navbar-fixed-top» в класс тега DIV, и он сработал.

Answer 7

Просто оставив по умолчанию навигатор, встроенный в бутстрап, отлично работает.
Вам просто нужно добавить пользовательский css ниже, таким образом все будет работать так, как должно.

HTML:

<nav class="navbar navbar-default"> 

CSS:

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

Answer 8

<nav class="navbar navbar-fixed-top navbar-light" style="background-color: transparent;"> 

<!--This should work just fine. it will make it transparent. hope i helped!--> 

Answer 9

CSS код:

.header .navbar-default { 
    background: none; 
} 

HTML код:

<header> 
    <nav class="navbar navbar-default"></nav> 
</header> 

Answer 10

Нет необходимости в этом беспорядке.

Вы можете сделать Navbar прозрачной, не писать navbar-default или navbar-inverse

<nav class="navbar"> //Don't add navbar-default to the class 

    // 

</nav> 

Answer 11

Попробуйте это в вашем коде, он работал для меня -

дают идентификатор для элемента , к которому вы хотите сделать прозрачным

, например, согласно вашему коду -

<div class="navbar-inner" id="nav1"> 

Затем примените это в css-

#nav1 
{ 
    background-color:#F00; /*whichever you want*/ 
    opacity: 0.5;   /*0.5 determines transparency value*/ 
    filter:(opacity=50);  
} 

Answer 12

в загрузчике 3.3.7 (и 4.0 предположительно), это работает:

вместо:

<nav class="navbar navbar-inverse navbar-fixed-top"> 

использование :

<nav class="navbar bg-transparent navbar-fixed-top"> 

не требуется CSS!