如何在页面中央放一个大图片，然后在里面放一个菜单？

Question

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

达到这种效果的最佳方法是什么？我无法提供任何代码尝试，因为我什至不知道如何开始。

这是为了演示问题：

Answer 1

演示

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

Answer 2

HTML：

<div id="largeImage">
    <div id="menu">Menu Here</div>
</div>

CSS：

html, body { width: 100%; height: 100%; }

#largeImage { 
    background: url('path/to/image.jpg'); 
    background-size: cover; 
    width: 100%;
    height: 100%; 
}

#menu { 
    width: 500px; 
    margin: 0 auto; 
}

这应该为您提供做什么的基础:) 基本上上面的代码是创建一个宽度和高度为 100% 的 div，然后在该 div 中间放置一个 500px 的菜单