我正在构建一个设计为 960 像素的网站，但设计师还要求页面上有一张全宽的背景照片。他为此提供了一张 2000 像素的图片。
然而，棘手的是，部分照片是页面导航不可或缺的一部分，因此图像需要居中。所以我希望左右边缘溢出视口(viewport)。我曾尝试使用 CSS 执行此操作，但失败了。
我可以做一个 javascript 版本来在加载文档和调整窗口时根据视口(viewport)调整左边距，但我预计它可能表现不佳，尤其是在调整时。该站点的许多目标受众都有一些严重的旧硬件，因此将使用运行 IE6 的慢速计算机。有没有一种性能更好的 CSS 方法？
更新:抱歉，我对“全 Angular ”的概念不是很清楚。站点的内容都限制在 960 像素的列内，除了这个特定的图像，它应该是浏览器窗口的全宽，即使它大于 960 像素。使用 background-position 是我已经尝试过的方法，但是如果我将特定 div 的大小设置为 2000px 宽，那么我就无法将 div 居中，而如果我将它设置为 100% background-position:中心似乎不起作用
最佳答案
您可以这样做的一种方法是使用 background-position: center top;，将 2000 像素的图像作为背景放到 960 像素的 div 中，如下所示:
据我所知，这在 IE6+ 上受支持
关于css - 大型居中背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14939364/