如何在导航栏后面获取图像

Question

html的新手，要编辑我的导航栏，以便它后面有一个图像，而导航栏则位于图像的底部。我该怎么做？

查看了一些论坛帖子后，这就是我尝试的：

#cover {
background-image: url("ImagesFB 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>

简单示例

Answer 2

将图像放置为可以使用的DOM元素的背景，背景图像CSS属性。例如 背景图：URL（'https：//static.pexels.com/photos/87646/horsehead-nebula-dark-nebula-dark-nebula-constellation-87646.jpeg'）;

W3School拥有有关CSS属性的很好的文档。这是链接