带有图形背景图像的内容的中央div，从远处的容器边缘到屏幕的左边缘？

Question

我有一个以页面为中心的内容div：

<div id="container>
</div>

#container {
margin: 0 auto;
width: 960px
}

我想要一个高度为1px，宽度为1000px的背景图像，从#container的右边缘到Web浏览器的左边缘。我已经制作了渐变，所以边缘颜色是一种纯色，所以我希望只能指定一种纯色作为背景，所以如果浏览器超宽，它看起来并不简洁。

任何想法如何做到这一点？ 谢谢！

Answer 1

如果我正确地关注了您，解决方案要求您将渐变背景图像置像并将其水平居中于相应的元素（即#container或其直接父元素）中。调查padding的{​​{1}}值也可能会产生一些好的结果。

Answer 2

我认为你的意思是something like this。

要在窗口的总高度上拉伸左侧颜色，请将absolute替换为fixed。

但要让背景图像显示3000像素宽（并且只有包含渐变的中心960像素，like this one）并将其附加到背景，这样会更容易：

body {
    background: url('/images/gradient3000x1.png') repeat-y center;
}

然后您不必担心内容的高度。