html - 如何将按钮定位在背景图像 HTML 的特定位置

Question

我是 HTML 和 CSS 的新手。我从 codeacademy 学习了基础知识，我有很多东西要学。我开始使用模板制作网站并开始在 Dreamweaver 上进行编辑。我有一个问题是关于将按钮(在上面的附图中)置于背景图像中出现的单元格中间。这看起来就像您点击细胞核进入网站一样。我不太确定我会怎么做。无论我的浏览器/屏幕尺寸如何，我都想确保它处于完全相同的位置。这是背景图片和标题中按钮的 CSS3 代码:

#header {
    position: relative;
    background-image: url("../../images/header.jpg");
    background-s[![enter image description here][1]][1]ize: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #fff;
    text-align: center;
    padding: 7.5em 0 2em 0;
    cursor: default;


#header .button {
        display: inline-block;
        border-radius: 100%;
        width: 4.5em;
        height: 4.5em;
        line-height: 4.5em;
        text-align: center;
        font-size: 1.25em;
        padding: 0;
    }

Answer 1

如果背景图片中的“灯泡”元素位于 60%，您的按钮也应如此:

http://jsbin.com/misoco/2/edit?html,css,js,output

再次重申，这并不完美，它在纵向模式下工作得很好，
但是一旦你进入横向(灰色顶部/底部图像线开始消失)，位置将不再完全匹配......
在这里你可以监听 css3 @media landscape 并应用不同的 %...

html, body{height:100%;}
body{
  margin:0;
  background: url(http://i.stack.imgur.com/DGzcs.png) 50%;
  background-size: cover;
}

#at50top{
  position:absolute;
  background:red;
  height:3px;
  width:100%;
  top:50%;
  margin-top:-1px;
}

#start{
  background:red;
  border-radius:50%;
  border:0;

  position:absolute;

  top:60%; /* if circle bulb in image is at 60% set at 60% */
  left:50%;
  width:  100px;
  height: 100px;
  margin-top:  -50px;
  margin-left: -50px;
}

<div id="at50top">I'm at 50% top</div>
<button id="start">I'm at 60%</button>