页面两侧的不同背景颜色

时间:2011-01-18 09:39:24

标签: html css colors background tiling

我想创建一个固定宽度的布局,其中页面两侧的背景颜色不同,但无论您缩小多远,背景颜色都会从页面的任意一侧无限延伸。

例如,我不打算创建一个9000x10像素的图像,其中任何一侧都有正确的颜色并将其平铺,因为这只有在你缩小到足以看到背景图像的边缘时才会起作用。 / p>

这可能吗?

谢谢!

修改

我应该指定,背景应该覆盖页面的整个高度,而不仅仅是窗口/视口的高度。

5 个答案:

答案 0 :(得分:6)

This似乎有效:

<body>
<div id="bg-right"></div>
<!-- rest of page -->
</body>

body {
  background-color: purple;
}
#bg-right {
  background-color: yellow;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  z-index: -1;
}

答案 1 :(得分:3)

这适用于IE7 +,包含少量和大量内容:

Live Demo(很多内容)
Live Demo(内容很少)

HTML:

<div id="left"></div>
<div id="right"></div>
<div id="container"></div>

CSS:

html, body {
    margin: 0; padding: 0; border: 0; 
}
body {
    background: #ccc
}
#left, #right {
    position: fixed;
    width: 50%;
    height: 100%;
    top: 0
}
#left {
    background: #ccc;
    left: 0
}
#right {
    background: #999;
    right: 0
}
#container {
    background: #fff;
    width: 80%;
    margin: 0 auto;
    position: relative
}

答案 2 :(得分:1)

这对你有什么用? http://jsfiddle.net/PNYVe/

答案 3 :(得分:1)

我不喜欢height: 100%; position: fixed;解决方案,因为我想让选项保持打开状态,以便稍后在页面上滚动背景图像。 (虽然我没有在写这个问题时想到这一点。)我有一个游戏,发现min-height: 100%;可以工作。

<html>
    <head>
        <style type="text/css">

            body {
                padding: 0;
                margin: 0;
            }

            #container {
                width: 100%;
                min-height: 100%;
                position: relative;
            }

            #left, #right {
                width: 50%;
                height: 100%;
                position: absolute;
                z-index: -1;
            }

            #left {
                left: 0;
                background-color: navy;
            }

            #right {
                right: 0;
                background-color: maroon;
            }

            #content {
                width: 512px;
                height: 100%;
                margin: 0 auto;
                background-color: white;
            }

        </style>
    </head>
    <body>
        <div id="container">
            <div id="left"></div>
            <div id="right"></div>
            <div id="content">
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
            </div>
        </div>
    </body>
</html>

由于某些原因,它在jsfiddle.net中不起作用:http://jsfiddle.net/HktPN/但它在我的浏览器中有效。

答案 4 :(得分:0)

使用Matt示例,只需添加一个容器就可以解决它: http://jsfiddle.net/PNYVe/3/