我想在整个 HTML 文档中使用渐变，并且在 BODY 标记的中心我需要另一个居中的背景。
编辑看看它失败了多少试试看:
http://xn--wiadomesny-37b.pl/bg
这张图片说明了这一点:
如果我放入 CSS，它会失败，甚至只显示 1 个背景，如果下面应该显示 repeat-y 背景:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html {
background-color: #ffeacd;
background-image: url(bg.png);
background-repeat: repeat-x;
}
body {
background-image: url(bg_overlay.png);
background-repeat: no-repeat;
background-position: center;
}
.content {
width:1020px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
</style>
</head>
<body>
<div class="content">
<p>This content is closed in 1020px wide DIV, as to merge in most displays. </p>
<p>Rest around is an background seen or unseen depends on users screen size. </p>
<p>Me got 24'' so its obvious that I will see all backgrounds and even gradients as
blank space fillers</p>
<p>
<h1>See how much it fails in various browsers:</h1>
<ul>
<li><a href="chrome.png">Chrome</a></li>
<li><a href="ff.png">Firefox</a></li>
<li><a href="ie.png">IE</a></li>
</ul>
</p>
)</div>
</body>
</html>
最佳答案
如果您没有看到两个背景，那可能是因为您的 body 元素与 html 占据了相同的区域。
下面演示了元素可以有不同的背景(http://jsfiddle.net/ZVHqs/):
<!doctype html>
<style>
html { background: green; }
body { background: yellow; margin: 1em; }
</style>
Hello world
关于HTML 和 BODY 不同的背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10480225/