引导程序可以更改导航栏的颜色,但无法摆脱颜色?



/*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>
	<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>

不确定为什么我在此NAV栏上遇到这么多麻烦。尝试引导程序,因为它应该使事情变得更容易。

,但我可以更改纳维尔背景的颜色,说蓝色。但是,如果我给背景颜色无。它什么都不做。

我尝试标记它很重要,我看到了建议将其纳入纳维尔默认面,并且无法使其正常工作。我只想让背景透明,没有任何内容。

none不是颜色,因此您不能将其用作背景颜色。您可以改用transparent

您遇到的另一个问题是<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>

对于透明背景,您需要:

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

最新更新