Question

我一直在尝试制作一个像this这样的简单网站。但是，我现在意识到我对CSS定位不好，因为按钮从未按预期显示正如您可能已经猜到的那样，我希望按钮（#play_button）完全显示在背景中的播放按钮图像上。有人可以告诉我该怎么做？

我的CSS代码：

body { 
     background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;    
     background-size:cover;  /*For covering full page*/
}

#play_button {
    position:relative;
    transition: .5s ease;
    top: 191px;
    left: 420px;
    right: -420px;
    bottom: -191px;
}
#play_button:hover { 
    -webkit-transform: scale(1.05);/*Grows in size like Angry Birds button*/
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

UPDATE：

更重要的是，出现问题的是，如果我调整浏览器窗口大小，那么图像会移动到新位置。

UPDATE：

问题解决了:) Here, in this example，你可以看到按钮保持在页面中心的方式，即使你调整浏览器窗口的大小。一如既往，你可以调整left和{{ 1}}偏移以获得所需的结果。 Here's the code

Answer 1

尝试使用绝对定位，而不是相对定位

这应该让你接近 - 你可以通过调整边距或上/左位置进行调整

#play_button {
    position:absolute;
    transition: .5s ease;
    top: 50%;
    left: 50%;
}

http://jsfiddle.net/rolfsf/9pNqS/

Answer 2

我会使用绝对定位：

#play_button {
    position:absolute;
transition: .5s ease;
    left: 202px;
    top: 198px;

}

Answer 3

似乎某些屏幕中心。所以我想这样做

body { 
     background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;    
     background-size:cover; 
     text-align: 0 auto; // Make the play button horizontal center
}

#play_button {
    position:absolute;  // absolutely positioned
    transition: .5s ease;
    top: 50%;  // Makes vertical center
}

Answer 4

所以，这里的诀窍是使用这样的绝对定位calc：

top: calc(50% - XYpx);
left: calc(50% - XYpx);

其中XYpx是图像大小的一半，在我的例子中，图像是正方形。当然，在这个现在过时的情况下，图像也必须按比例改变其大小以响应窗口大小调整，以便能够保持在中心而不会看起来不成比例。

如何将Button完全定位在CSS中

UPDATE：

UPDATE：

4 个答案: