CSS覆蓋在引導3.3.4導航欄消除背景顏色，當

基本上我可以在引導3.3.4改變導航欄的背景顏色爲任何顏色，我想簡單地使用不工作除了當我想通過去除顏色：CSS覆蓋在引導3.3.4導航欄消除背景顏色，當

.navbar {background-color: transparent;}

我已經試過許多方法來得到這個工作，它工作在引導的早期版本就好這是一個已知的問題或是否有新的使導航欄中的背景透明的類？

<!DOCTYPE html> 
<html lang ="en"> 
<head> 
<meta charset="utf-8"> 
<title>Hilmy Productions</title> 
<script src="bower_components/jquery/dist/jquery.min.js"></script> 
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
<link href="less_css/hilmy_css.css" rel="stylesheet"> 
</head> 
<body> 
    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <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="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
</body> 
</html>

CSS：

html { 
    background: url(../imgs/Hilmy/Hilmy_Sign_FINAL.jpg)no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

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

來源

2015-05-17 Xavier Gilmore

好心的把你的html代碼，因爲我沒有任何問題在改變.navbar我想要的任何顏色或確保你沒有使用2類navbar導航欄默認或導航欄navbar反相如果是你的情況比你有更改navbar-default或navbar-inverse的背景顏色，以標記

添加了html和css，它不是什麼瘋狂的只是一個基本的圖像背景，可以在bootstrap網站上找到默認的導航欄。 –

我已經檢查了getbootstrap.com的默認導航欄，如果那樣的話，比你必須改變背景顏色.navbar-default不用導航欄，並且如果你在加載bootstrap.min.css之前放置你的樣式比你必須放！在你的代碼中也很重要.navbar-default {background-color：#whatever you want} –

有兩種方法去了解這一點：

變化bodybackground-color。使頁面的主體透明將使底層圖像可見。默認情況下，主體具有白色的背景顏色。

html { 
 
    background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/10/simple-wallpaper-26.jpg)no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
body { 
 
    background-color: rgba(0, 0, 0, 0) !important; 
 
    /*by default white*/ 
 
} 
 
.navbar { 
 
    background-color: transparent !important; 
 
} 
 

 
/*just to put emphasis on the changes*/ 
 
/*.container-fluid { 
 
    border-bottom: solid; 
 
} 
 
*/ 
 
a { 
 
    color: black !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
     <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="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
      <li><a href="#">Another action</a> 
 
      </li> 
 
      <li><a href="#">Something else here</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">One more separated link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <form class="navbar-form navbar-left" role="search"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
     </form> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
      <li><a href="#">Another action</a> 
 
      </li> 
 
      <li><a href="#">Something else here</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>

，而不是使用上的HTML標籤把它放在你的頁面的主體背景屬性。

body { 
 
    background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/10/simple-wallpaper-26.jpg)no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.navbar { 
 
    background-color: transparent !important; 
 
} 
 

 
/*just to put emphasis on the changes*/ 
 
/*.container-fluid { 
 
    border-bottom: solid; 
 
} 
 
*/ 
 
a { 
 
    color: black !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
     <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="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
      <li><a href="#">Another action</a> 
 
      </li> 
 
      <li><a href="#">Something else here</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">One more separated link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <form class="navbar-form navbar-left" role="search"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
     </form> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
      <li><a href="#">Another action</a> 
 
      </li> 
 
      <li><a href="#">Something else here</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>

第二個選項是更優選的。
忽略添加到.container-fluid類的屬性和a元素，它們只是爲了使更改更加明顯。

來源

2015-05-17 05:19:32

謝謝你，我不知道我是否會想出來。爲什麼你需要將這些屬性添加到.container-fluid和body？ –

對我的回答增加了解釋，'.container-fluid'上的樣式也不是必需的。 –

CSS覆蓋在引導3.3.4導航欄消除背景顏色，當

回答

相關問題