将图像固定在顶部但侧面有自动边距

时间:2012-09-29 07:24:25

标签: html css

我有以下html:

<div class="fix-to-top">
    <div class="background-image"></div>
</div>

我希望能够将图像的位置固定到页面顶部 - 这样无论用户滚动多远,它都始终位于页面的顶部。此外,我希望图像始终保持在页面的中心,因此如果用户重新调整其浏览器的大小,图像将保持在中心位置。这是我尝试过的,但没有得到结果:

.fix-to-top {
    position: fixed;
    top: 0px;
    width: 2000px;
}
.fix-to-top .background-image {
    margin: 0 auto;
}

然而,边缘不是'自动'。我怎么能正确地做到这一点?

2 个答案:

答案 0 :(得分:1)

img {
    position: fixed;
    right: 50%;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-right: -50px;
    background: orange;
    top: 50%;
}​

http://jsfiddle.net/jXdxr/1/

答案 1 :(得分:-1)

选中此fiddle

无需使用两个div

您可以使用 background-attachment background-postion 属性来实现它