CSS：将背景色设置为窗口宽度的50％

Question

试图在“分成两部分”的页面上获得背景；相对两侧的两种颜色（似乎是通过background-color在body标记上设置默认值，然后将另一种颜色应用到div可拉伸整个窗口宽度的来完成的）。

我确实提出了一个解决方案，但不幸的是，该background-size属性在IE7 / 8中不起作用，这对于该项目是必不可少的-

body { background: #fff; }
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

由于它只是纯色，也许有一种只使用常规background-color属性的方法吗？

Answer 1

如果必须有较旧的浏览器支持，那么您就不能同时使用多个背景或渐变，那么您可能需要对备用div元素执行以下操作：

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

该解决方案使用一个额外的固定div来填充屏幕的一半。由于它是固定的，因此即使您的用户滚动，它也将保持在原位。您稍后可能需要弄弄一些z索引，以确保您的其他元素位于背景div上方，但不要太复杂。

如果遇到问题，只需确保其余内容的z索引高于背景元素，就可以了。

现代浏览器

如果仅是较新的浏览器，则可以使用其他两种方法：

线性渐变：

这绝对是最简单的解决方案。您可以在主体的背景属性中使用线性渐变以获得各种效果。

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

每种颜色都会导致50％的硬截止，因此顾名思义，没有“渐变”。尝试对样式的“50％”部分进行试验，以查看可以实现的不同效果。

具有背景大小的多个背景：

您可以将背景颜色应用于html元素，然后将背景图像应用于body元素，并使用background-size属性将其设置为页面宽度的50％。这会产生类似的效果，尽管实际上只有在使用一两个图像时才在渐变上使用。

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

额外的注意： 请注意，在后面的示例中，html和body元素均设置为height:100%。这是为了确保即使您的内容小于页面，背景也将至少是用户视口的高度。没有明确的高度，背景效果将仅下降到页面内容。一般来说，这也是一个很好的做法。