html - 如何获取导航栏后面的图像

Question

对 HTML 有点陌生，想编辑我的导航栏，使其后面有一个图像，并且导航栏位于图像的底部。我该怎么做？

看了几个论坛帖子后，这是我试过的:

#cover {
background-image: url("Images\FB Cover.png");
}

<div id="cover">

<div>
<nav>
<li><a href="Index.html">Home</a></li>
<li><a href="About.html">About DRC</a></li>
<li><a href="Products.html">Our Products</a></li>
<li><a href="Contact.html">Contact</a></li>
</nav>
</div>

</div>

Answer 1

#cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://lorempixel.com/800/600) no-repeat 50% 50% / cover;
}
menu {
  position: absolute;
  left: 20px;
  bottom: 20px;
}
a {
  color: #fff;
}

<div id="cover">
  <menu>
    <li><a href="Index.html">Home</a></li>
    <li><a href="About.html">About DRC</a></li>
    <li><a href="Products.html">Our Products</a></li>
    <li><a href="Contact.html">Contact</a></li>
  </menu>
<div>

简单的例子