Question

我希望在HTML文档中都有渐变，并且在BODY标记的中心我需要另一个背景居中。

修改以查看尝试失败的程度：

此图片解释了它：

enter image description here

如果我放入CSS，它会失败，甚至只显示1个背景，如果下面应该显示repeat-y background：

<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>

Answer 1

如果您没有看到两个背景，那可能是因为您的body元素占据的区域与html相同。

以下内容表明元素可以具有不同的背景（http://jsfiddle.net/ZVHqs/）：

<!doctype html>
<style>
html { background: green; }
body { background: yellow; margin: 1em; }
</style>
Hello world

Answer 2

我认为这应该可以帮到你：

html {
           background: #ffeacd url(bg.png) 0 0 repeat-x;
           width:100%;
           height:100%;
     }
body {
           background:transparent url(bg_overlay.png) center center no-repeat;
           width:100%;
           height:100%;
     }
.content {
           width:1020px;
           padding: 0px;
           margin-top: 0px;
           margin-right: auto;
           margin-bottom: 0px;
           margin-left: auto;
         }

Answer 3

你应该尝试这样做，

body{
    background-position: fixed;
}

Answer 4

您应该使用两个DIV，一个用于左侧栏，一个用于主要内容。将BODY的背景设置为渐变，将左侧的DIV设置为您想要的任何值。

然后你只需要专注于为div创建两列布局。 This是CSS定位的绝佳入门。

HTML和BODY不同的背景

4 个答案: