6

I have been trying to make a simple site like this. However , I do now realize that I am bad at CSS Positioning for the button never does show up as intended.
As you might have guessed , I want the button (#play_button) to show up exactly on the play button image in the background. Can someone please tell me how it's to be done ?

My CSS code:

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:

Just one thing more, problem occurring is that if I re size the browser window , then the image moves to a new position.

UPDATE:

Problem solved :) Here, in this example, you can see how the button remains in the center of the page even if you re size the browser window.As always , you can tweak the left and top offsets to get the desired results. Here's the code.

4

4 回答 4

10

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

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

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

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

于 2013-09-05T15:44:55.760 回答
3

我会使用绝对定位： 

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

}
于 2013-09-05T15:45:38.557 回答
2

画面中央似乎有些什么。所以我想这样做

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
}
于 2013-09-05T15:45:21.287 回答
1

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

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

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

于 2017-03-24T04:00:44.950 回答