Html 在导航栏下方添加背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38038056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a background image just below the navigation bar
提问by Yoshita Arora
I want to add a background image (having a full window sized width) just below the navigation bar. It should not cover the whole page length, but starts just below the navigation bar menu, and goes down till a particular specified height. (but the width is full).
我想在导航栏下方添加背景图像（具有完整的窗口大小宽度）。它不应该覆盖整个页面长度，而是从导航栏菜单下方开始，一直下降到特定的指定高度。（但宽度已满）。
I referred to the following but still no results: Starting a background image below navbar in Twitter Bootstrap. I am also not using any Bootstrap.
我参考了以下内容，但仍然没有结果： 在 Twitter Bootstrap 中的导航栏下方启动背景图像。我也没有使用任何 Bootstrap。
This is what I have coded so far but no results:
这是我到目前为止编码但没有结果的内容：
HTML:
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Numberz</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<nav>
<img src="image2.png" alt="numberz" width="218px" height="38px" style="margin-left: 100px; margin-top: 15px; float: left; display: inline-block;">
<section style="margin-right: 150px;">
<ul id="menu">
<li><a href="#"><b>SIGNUP</b></a></li>
<li><a href="#"><b>LOGIN</b></a></li>
<li><a href="#"><b>ACCOUNTANTS</b></a></li>
<li><a href="#"><b>BLOG</b></a></li>
<li><a href="#"><b>FEATURES</b></a></li>
<li><a href="#"><b>PRICING</b></a></li>
</ul>
</section>
</nav>
<div id="backgroundimage"></div> //this is the division created for the background image
</body>
</html>
CSS:
CSS：
ul#menu li {
display: inline-block;
float: right;
position: relative;
margin-top: 28px;
margin-left: 10px;
margin-right: 35px;
}
ul#menu li a {
text-decoration: none;
color: #808080;
font-family: "Helvetica Neue";
font-size: 15px;
}
#backgroundimage {
background: url("image3.png");
width: 1024px;
height: 500px;
background-repeat: no-repeat;
display: block;
position: relative;
background-position: 0 500px;
}
Right now It looks like this:
现在它看起来像这样：
I want something like this:
我想要这样的东西：
Any help would be greatly appreciated.
任何帮助将不胜感激。
回答by Junmar Calimbas Jose
I've tried your code. Try changing this line:
我试过你的代码。尝试更改此行：
#backgroundimage {
background: url("image3.png");
width: 1024px;
height: 500px;
background-repeat: no-repeat;
display: block;
position: relative;
background-position: 0 500px;
}
to this:
对此：
#backgroundimage {
background-image: url("image3.png");
width: 100vw;
height: 100vh;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
and then add this to your css:
然后将其添加到您的 css 中：
nav
{
overflow: auto;
}
Here's a proof that it works:
这是它有效的证明：
回答by Ason
The main problem with floating content is, its parent doesn't size with it.
浮动内容的主要问题是，它的父级不适合它。
Set your navto overflow: autowill solve that.
将您设置nav为overflow: auto将解决该问题。
But I recommend to skip the float: rightin the ul#menu lirule (as in 2.nd sample below)
但我建议跳过float: right的ul#menu li规则（如下2.nd样品中）
ul#menu li {
display: inline-block;
position: relative;
margin-top: 28px;
margin-left: 10px;
margin-right: 35px;
}
ul#menu li a {
text-decoration: none;
color: #808080;
font-family: "Helvetica Neue";
font-size: 15px;
}
#backgroundimage {
background: url("http://lorempixel.com/600/600/city");
width: 1024px;
height: 500px;
background-repeat: no-repeat;
background-position: cover;
}<nav>
<img src="image2.png" alt="numberz" width="218px" height="38px" style="margin-left: 100px; margin-top: 15px; float: left; display: inline-block;">
<section style="margin-right: 150px;">
<ul id="menu">
<li><a href="#"><b>SIGNUP</b></a></li>
<li><a href="#"><b>LOGIN</b></a></li>
<li><a href="#"><b>ACCOUNTANTS</b></a></li>
<li><a href="#"><b>BLOG</b></a></li>
<li><a href="#"><b>FEATURES</b></a></li>
<li><a href="#"><b>PRICING</b></a></li>
</ul>
</section>
</nav>
<div id="backgroundimage"></div> //this is the division created for the background imageSample without float
样品无浮动
ul#menu li {
display: inline-block;
position: relative;
margin-top: 28px;
margin-left: 10px;
margin-right: 35px;
}
ul#menu li a {
text-decoration: none;
color: #808080;
font-family: "Helvetica Neue";
font-size: 15px;
}
#backgroundimage {
background: url("http://lorempixel.com/600/600/city");
width: 1024px;
height: 500px;
background-repeat: no-repeat;
background-position: cover;
}<nav>
<img src="image2.png" alt="numberz" width="218px" height="38px" style="margin-left: 100px; margin-top: 15px; float: left; display: inline-block;">
<section style="margin-right: 150px;">
<ul id="menu">
<li><a href="#"><b>SIGNUP</b></a></li>
<li><a href="#"><b>LOGIN</b></a></li>
<li><a href="#"><b>ACCOUNTANTS</b></a></li>
<li><a href="#"><b>BLOG</b></a></li>
<li><a href="#"><b>FEATURES</b></a></li>
<li><a href="#"><b>PRICING</b></a></li>
</ul>
</section>
</nav>
<div id="backgroundimage"></div> //this is the division created for the background image回答by frnt
Try this, there was a issue with background-position,
试试这个，背景位置有问题，
#backgroundimage {
background:url(1.jpg);
margin-top:80px;
margin-left:100px;
width: 1024px;
height: 500px;
background-repeat: no-repeat;
display: block;
position: absolute;
background-position:center;
background-size:cover;
}
回答by brahimm
I think you should just put the nav in a div and the image in another div so they get separated
我认为你应该把导航放在一个 div 中，把图像放在另一个 div 中，这样它们就分开了
回答by samiha ferdous
well i did something unprofessional. i had already set my background image . I just changed the color of my navbar ..
好吧，我做了一些不专业的事情。我已经设置了我的背景图片。我刚刚更改了导航栏的颜色..
//in css i did this
//在css中我做了这个
.navbar-expand-lg
{
background: #FEFEFE;
box-shadow: 0 5px 10px #545b62; // just adding some shadow in the box
}
