0

我正在构建一个设计为 960 像素的网站，但设计师还要求页面上有一张全宽的背景照片。他为此提供了一个 2000 像素的图像。

然而，棘手的是，照片的一部分是页面导航不可或缺的一部分，因此图像需要居中。所以我希望左右边缘溢出视口。我尝试使用 CSS 来做到这一点，但失败了。

当文档加载并调整窗口时，我可以做一个 javascript 版本来根据视口调整左边距，但我预计它可能会表现不佳，特别是在调整时。该网站的许多目标受众都有一些严重的遗留硬件，因此将使用运行 IE6 的慢速计算机。有没有一种好的 CSS 方法可以更好地执行此操作？

更新：对不起，我对“全角”的东西不是很清楚。该网站的内容都被限制在一个 960 像素的列中，除了这个特定的图像，它应该是浏览器窗口的全宽，即使它大于 960 像素。使用背景位置是我已经尝试过的方法，但是如果我将特定 div 的大小设置为 2000px 宽，那么我无法将 div 居中，而如果我将其设置为 100% 背景位置：中心似乎不起作用

4

3 回答 3

1

您可以这样做的一种方法是background-position: center top;，将 2000 像素的图像作为背景放置到 960 像素的 div 中，如下所示：

演示

据我所知，这在 IE6+ 上受支持

于 2013-02-18T15:18:56.980 回答
0

只需使用背景定位。

body {
    background: url(blah.jpg) center top no-repeat;
}
于 2013-02-18T15:26:29.253 回答
-1

在图像上尝试这样的事情： 

position: absolute;
left:50%;
margin-left:-1000px; /* half the width of the image */

但是，如果图像的一部分将用于导航，并且它具有固定的 2000 像素宽度，我会在你的未来看到很多眼泪。

考虑将图像划分为可以单独操作的层。

编辑：正如迈克尔所说，这种方法不好。

于 2013-02-18T15:23:24.097 回答