当我设置 body {width: 960px; 时，为什么我的背景会散布在浏览器中？边距：自动 0；}？ [复制]

Question

所以我有一个我想知道的非常基本的问题。我只是通过css设置了背景

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

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

.container {
background: #099;
}

这是为什么呢？身体形象不应该受到我设置的宽度的限制吗？

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

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

Answer 1

因为，如果你没有为 HTML 设置背景，body 的背景也会应用到 HTML。

只需添加：DEMO

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

你的身体背景只会在身体站立的地方绘制。

请参阅 W3C 了解更多信息。