2017-09-23 13 views
2

ブートストラップはnavbarの色を変更できますが、色を取り除くことはできませんか?

/*This is for the overall look of the page, what font and the repeated background image*/ 
 
body { 
 

 
    background-image: url("../Assets/crossword.png"); 
 
    font-family: Rockwell, "Courier New", Georgia, 'Times New Roman', serif; 
 

 
} 
 

 
/*This is just to get the main content of the page centered*/ 
 
#mainBody { 
 
    width: 80%; 
 
    margin: auto; 
 
    margin-top: 10px; 
 
} 
 

 

 
.navbar-custom { 
 
    background-color: none; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <!-- This is the title of the first page --> 
 
    <title></title> 
 
\t <meta charset="utf-8" /> 
 

 
    <!-- This is the viewport settings for bootstrap --> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 

 
    <!-- These are the javascript, CSS, and jquery file scripts --> 
 
    <script src="Scripts/jquery-1.9.1.min.js"></script> 
 
    <script src="Scripts/bootstrap.min.js"></script> 
 
    <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
 
    <link href="Content/MyStyleSheet.css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <div id="mainBody"> 
 
     
 
     <nav class="navbar navbar-inverse navbar-custom"> 
 

 
     </nav> 
 
      
 

 
      
 
     
 
    </div> 
 
     
 
    
 
</body> 
 
</html>

ないのはなぜ私は、このナビゲーションバーを持つので、多くの問題を抱えていてください。ブートストラップを試してみましょう。

しかし、navbarの背景色を青色に変更することができます。しかし、私は背景色を与えない場合。それは何もしません。

重要な印を付けてみましたが、私はnavbar-defaultにするための提案を見て、動作させることはできません。私はただ透明になることを背景にしたい、それに何も持たない。透明な背景のために

答えて

2

noneは色ではありませんので、あなたは、背景色として使用することはできません。代わりにtransparentを使用できます。

もう1つの問題は、<nav>要素のnavbar-inverseクラスであり、優先順位が高くなります。

あなたは、この修正する.navbar-custom.navbar-inverseを使用することができます。

/*This is for the overall look of the page, what font and the repeated background image*/ 
 
body { 
 

 
    background-image: url("../Assets/crossword.png"); 
 
    font-family: Rockwell, "Courier New", Georgia, 'Times New Roman', serif; 
 

 
} 
 

 
/*This is just to get the main content of the page centered*/ 
 
#mainBody { 
 
    width: 80%; 
 
    margin: auto; 
 
    margin-top: 10px; 
 
} 
 

 

 
.navbar-custom.navbar-inverse { 
 
    background-color: transparent; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div id="mainBody"> 
 

 
    <nav class="navbar navbar-inverse navbar-custom"> 
 

 
    </nav> 
 

 
</div>

+0

親愛なる主君の神、それはそれだったすべてです、それはビールとウィッチャー助けて –

+0

ハッピー3時間ハハです:) – Dekel

0

次のものが必要です。

.navbar-custom { 
    background-color: transparent; 
} 
関連する問題