页面两侧的不同背景颜色

Question

页面两侧的不同背景颜色

Jes*_*sse 7 html css background tiling colors

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

例如,我不是要创建一个9000x10像素的图像,其中任何一侧都有正确的颜色并将其平铺,因为只有在缩小到足以看不到背景图像边缘的情况下才能使用.

这可能吗？

谢谢!

编辑:

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

Answer 1

Fre*_*urk 6

这似乎有效:

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

如果我每次读到"...... IE6都不支持",我就有镍...... (2认同)

Answer 2

Jes*_*sse 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>

Run Code Online (Sandbox Code Playgroud)

由于某种原因，它在 jsfiddle.net 中不起作用：http://jsfiddle.net/HktPN/但在我的浏览器中却可以。

归档时间：	15 年，1 月前
查看次数：	29584 次
最近记录：	15 年，1 月前