在导航栏下方添加背景图像答案

【问题标题】：Adding a background image just below the navigation bar在导航栏下方添加背景图像
【发布时间】：2016-06-26 11:28:50
【问题描述】：

我想在导航栏下方添加一个背景图像（具有整个窗口大小的宽度）。它不应该覆盖整个页面长度，而是从导航栏菜单下方开始，一直到特定的指定高度。（但宽度已满）。

我参考了以下但仍然没有结果： Starting a background image below navbar in Twitter Bootstrap。我也没有使用任何引导程序。

这是我到目前为止编写的代码，但没有结果：

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：

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

现在看起来是这样的：

我想要这样的东西：

任何帮助将不胜感激。

【问题讨论】：

标签： html css

【解决方案1】：

我已经尝试过您的代码。尝试更改此行：

#backgroundimage {
background: url("image3.png");
width: 1024px;
height: 500px;
background-repeat: no-repeat;
display: block;
position: relative;
background-position: 0 500px;
}

到这里：

#backgroundimage {
background-image: url("image3.png");
width: 100vw;
height: 100vh; 
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}

然后将其添加到您的 css 中：

nav
{
overflow: auto;
}

这是一个有效的证明：

【讨论】：

【解决方案2】：

浮动内容的主要问题是，它的父级不适合它。

将您的nav 设置为overflow: auto 即可解决此问题。

但我建议跳过ul#menu li 规则中的float: right（如下面的第二个示例）

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

没有浮动的示例

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

【讨论】：

【解决方案3】：

试试这个，背景位置有问题，

#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;
}

【讨论】：

【解决方案4】：

我认为您应该将导航放在一个 div 中，将图像放在另一个 div 中，以便它们分开

【讨论】：