如何将按钮放在背景图像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

如果背景图片中的“bulb”元素位于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>