html - 如何在页脚上设置背景图像

Question

我希望图片覆盖页面上的所有内容，但 <header> 除外然而，底部总是有一条白色的空间。 我用过margin-right和margin-left覆盖侧面，但是 margin-bottom不填充底部的空白区域。

header {
  margin-bottom: 20px;
}
h1 {
  text-align: center;
}
nav {
  text-align: center;
}
ul {
  list-style-type: none;
}
li {
  display: inline;
  padding-right: 5px;
  padding-left: 5px;
}
li a {
  color: black;
  text-decoration: none;
}
#wrapper {
  background-image: url(rome.jpg);
  -webkit-background-size: 100% 600px;
  background-repeat: no-repeat;
  height: 600px;
  margin-right: -8px;
  margin-left: -8px;
}

<header>
  <h1>Colin Bruin</h1>
  <nav>
    <ul>
      <li><a href="home.html">Home</a>
      </li>|
      <li><a href="code.html">Code</a>
      </li>|
      <li><a href="webpages.html">Webpages</a>
      </li>|
      <li><a href="articles.html">Articles</a>
      </li>|
      <li><a href="resume.html">Resume</a>
      </li>
    </ul>
  </nav>
</header>
<div id="wrapper">

  <main>

  </main>
</div>

Answer 1

body 默认情况下有一些margin，这就是为什么您会看到底部空间以及左/右空间(您使用负边距来破解)修复它)。

要解决此问题，请在 body 中设置 margin:0，并且您不需要左/右的负 margin

body {
  margin: 0
}
header {
  margin-bottom: 20px;
}
h1 {
  text-align: center;
}
nav {
  text-align: center;
}
ul {
  list-style-type: none;
}
li {
  display: inline;
  padding-right: 5px;
  padding-left: 5px;
}
li a {
  color: black;
  text-decoration: none;
}
#wrapper {
  background-image: url(//lorempixel.com/1000/1000);
  -webkit-background-size: 100% 600px;
  background-repeat: no-repeat;
  height: 600px;
}

<header>
  <h1>Colin Bruin</h1>
  <nav>
    <ul>
      <li><a href="home.html">Home</a>
      </li>|
      <li><a href="code.html">Code</a>
      </li>|
      <li><a href="webpages.html">Webpages</a>
      </li>|
      <li><a href="articles.html">Articles</a>
      </li>|
      <li><a href="resume.html">Resume</a>
      </li>
    </ul>
  </nav>
</header>
<div id="wrapper">
 <main>
  </main>
</div>