当我设置body {width：960px时，为什么我的背景会在浏览器中传播？ margin：auto 0;}？

Question

所以我有这个非常基本的问题，我在想。我只是通过css设置背景

body {
width: 960px;
margin: 0 auto;
background-image: url("../img/background2.jpg");
}

为什么图像也会出现在两侧，而不仅仅是960像素的中心？如果我将背景图像放在导航类选择器中，它确实有效：

.container {
background: #099;
}

为什么？不应该用我设定的宽度来限制身体形象吗？

这是我的代码：http://jsfiddle.net/nB22j/

此外，如果我可以将所有内容放入正文{}中，那么.container选择器是否有用处？ （在这种情况下，我确实希望背景填满整个浏览器，这样我就可以将我的背景放在身体{}但我只是想知道......）我不确定为什么我添加了容器div首先。有什么理由存在吗？

Answer 1

因为，如果您没有为HTML设置背景，那么正文的背景也会应用于HTML。

只需添加以下内容： DEMO

html {
background:#fff;/* or any color/image/gradient you want */
}

并且你的身体背景只会在身体所在的位置绘制。

有关更多信息，请参阅 W3C 。