html - 具有从远容器边缘到屏幕左边缘的图形背景图像的内容的中央 div？

Question

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

<div id="container>
</div>

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

我想要一个 1px 高和 1000px 宽渐变的背景图像，从 #container 的右边缘跨越到 Web 浏览器的左边缘。我已经制作了渐变，所以边缘颜色是纯色，所以我希望可以只指定纯色作为背景，这样如果浏览器变得超宽，它看起来就不会卡顿。

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

Answer 1

如果我没听错，该解决方案要求您对渐变背景图像进行 mask 处理，并将其水平居中放置在适当的元素(#container 或其直接父元素)内。调查 #container 的 padding 值也可能会产生一些好的结果。