jquery - 如何将背景图像 div 居中？

Question

当您调整屏幕大小时，标题背景图像会不断居中。

我似乎无法复制这种效果。

我有：

<div id="cover" style="background:url(/design/cover.jpg) repeat-x top">
</div>

和

#cover {
    height:450px;
    width:100%;
background-position: center;
}

然而，我似乎无法达到与他们相同的效果。

有什么帮助吗？

问候，汤姆

score 3 · Accepted Answer

内联 CSS 会覆盖外部 CSS。CSS 中设置的任何背景属性都会被您的内联规则覆盖。

要么改变它，所以背景被定位为内联：

background:url(/design/cover.jpg) repeat-x center center;

或者更改它以便只在元素上定义图像：

background-image:url(/design/cover.jpg);

或将其移至您的样式表（您确实应该这样做）。

score 1 · Accepted Answer

我认为您的内联样式中的背景位置可能会覆盖您的 CSS。尝试使用background-image: url(/design/cover.jpg);内联并使用这个 CSS：

#cover {
    height:450px;
    width:100%;
    background-repeat: x
    background-position: center top;
}

或者将整个内容放入您的样式表是一个更好的主意，但我假设您有理由将其内联。如果您决定这样做，这应该有效：

#cover {
    height:450px;
    width:100%;
    background-repeat: url(/design/cover.jpg) repeat-x center top;
}

2 回答 2