0

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

编辑看看它失败了多少试试：

http://xn--wiadomesny-37b.pl/bg

这张图片解释了它：

在此处输入图像描述

如果我输入 CSS，它会失败，即使下面应该显示重复-y 背景，也只会显示 1 个背景：

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

4 回答 4

3

如果您没有看到两个背景，可能是因为您的body元素与html.

下面演示了元素可以有不同的背景（http://jsfiddle.net/ZVHqs/）：

<!doctype html>
<style>
html { background: green; }
body { background: yellow; margin: 1em; }
</style>
Hello world
于 2012-05-07T10:21:15.743 回答
1

我认为这应该可以帮助您：

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;
         }
于 2012-05-07T11:26:12.867 回答
0

你应该尝试这样做，

body{
    background-position: fixed;
}
于 2012-05-07T10:13:13.683 回答
0

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

然后你只需要专注于为 div 创建两列布局。这是一本很好的 CSS 定位入门。

于 2012-05-07T10:14:56.613 回答