html - 如何在页面中央放置一个大图像，然后在其中放置一个菜单？

Question

我有这张垂直形成的图像，它应该到达页面底部。所以基本上它的高度应该一直是 100%。然后这个相同的图像也应该放在页面的中心，这很简单，但我正在努力的是在图像中间(在它里面)制作一个菜单。

实现该效果的最佳方法是什么？我无法提供任何代码尝试，因为我什至不知道如何开始。非常感谢您的帮助。

这是为了演示问题:

Answer 1

Demo

html

<div class="menuOnImage">
    <ul>
      <li>Home</li>
      <li>Works</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
</div>

CSS

.menuOnImage {
    background: url('http://www.picturesnew.com/media/images/image-background.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top:0;
    bottom:0;
    text-align: center;
    width: 80%;
    left:0;
    right: 0;
    margin: auto;
    height: 100%;
}
ul {
    display: inline-block;
    position: absolute;
    top:0;
    bottom:0;
    height: 110px;
    left:0;
    right: 0;
    margin: auto;
    width: 60%;
    border: 5px solid #fff;
    list-style: none;
    padding:0;
    border-radius: 5px;
    padding: 5px;
    background: rgba(0,0,0,0.4);
}
li {
    border: 2px solid #aaa;
    margin: 2px;
    background: rgba(0,0,0,0.4);
    color: #fff;
}
body, html {
    height: 100%;
    margin:0;
    padding:0;
}