html - 使用 CSS 在图像中居中按钮

Question

我需要使用 CSS 使按钮在图像中居中，但我无法使按钮相对于图像的左上角居中

这是页面

http://jsfiddle.net/3j5w5v7f/

HTML 文件:

<div class="content">
    <img class="mainImage" src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" alt="logo">

    <div id="startButton">
            <button onclick="hide()" width="40px">Start Now</button>
    </div>  
</div>

CSS:

.content{
    position: relative;
}

img.mainImage{
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    width: auto;
    height: auto;
    max-width: 400px;
    max-height: 500px;
    visibility: visible;
    z-index: 1;
}
#startButton{
     position: absolute;
     margin-left: auto;
     margin-right: auto;
     top: 0px;
     left: 0px;
     z-index: 2;
}

body{
     background-image: url('http://www.psdgraphics.com/file/colorful-triangles-background.jpg');
     margin: 0;
     padding: 0;
}

我需要一些类似于“下载 Whataspp”按钮的东西 http://www.whatsapp.com/

我需要一个按钮，当你调整窗口大小时，它的行为就像那个按钮，即它不会相对于它的背景图像移动

Answer 1

您的问题不是很清楚，我将其解释为“我怎样才能绝对地将按钮置于图像顶部的中心位置”。在这种情况下，您需要给包含元素 relative 定位，然后将按钮上的负上边距和左边距设置为按钮宽度/高度的一半，如下所示:

#mainImage {
    position:relative;
}
#startButton{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-33px;
    margin-top:-9px;
    z-index: 2;
}

Updated Fiddle