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