试图在“一分为二”的页面上实现背景;两种相对的颜色(似乎是通过在body标签上设置默认的背景色来完成的，然后将另一种颜色应用到扩展整个窗口宽度的div上)。
我确实提出了一个解决方案，但不幸的是，背景大小的属性不工作在IE7/8，这是一个必须为这个项目-
body { background: #fff; }
#wrapper {
background: url(1px.png) repeat-y;
background-size: 50% auto;
width: 100%;
}
既然它只是关于纯色，也许有一种方法只使用常规的背景颜色属性?
当前回答
最可靠且语义正确的选项是使用定位固定的伪元素(::after或::before)。使用这种技术时，不要忘记为容器内的元素设置z-index。还要注意，伪元素的content:""规则是需要的，否则它不会被渲染。
#container {...}
#content::before {
content:"";
background-color: #999;
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 50%;
z-index: 1;
}
#content * {
position: relative;
z-index:2;
}
生活例子: https://jsfiddle.net/xraymutation/pwz7t6we/16/
其他回答
这应该与纯css工作。
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));
仅在Chrome中测试。
如果你想使用50%高度的线性梯度:
background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;
旧浏览器支持
如果旧的浏览器支持是必须的，所以你不能使用多个背景或渐变，你可能会想在一个空闲的div元素上做这样的事情:
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
例如:http://jsfiddle.net/PLfLW/1704/
解决方案使用了一个额外的固定div，它占据了屏幕的一半。由于它是固定的，所以即使用户滚动，它也会保持在原位。稍后您可能需要修改一些z索引，以确保其他元素位于背景div之上，但不应该太复杂。
如果你有问题，只要确保你的其余内容的z指数高于背景元素，你就应该很好了。
现代浏览器
如果你只关心更新的浏览器，你可以使用其他一些方法:
线性梯度:
这绝对是最简单的解决方案。您可以在主体的背景属性中使用线性梯度来获得各种效果。
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
这就导致了每种颜色的50%的硬截断，所以没有名字所暗示的“渐变”。试着尝试“50%”的风格，看看你能达到的不同效果。
例如:http://jsfiddle.net/v14m59pq/2/
使用background-size的多个背景:
您可以将背景颜色应用到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;
}
例如:http://jsfiddle.net/6vhshyxg/2/
注意:在后面的例子中，html和body元素都被设置为height: 100%。这是为了确保即使你的内容比页面小，背景也至少是用户视口的高度。如果没有明确的高度，背景效果只会和你的页面内容一样低。一般来说，这也是一种很好的练习。
最可靠且语义正确的选项是使用定位固定的伪元素(::after或::before)。使用这种技术时，不要忘记为容器内的元素设置z-index。还要注意，伪元素的content:""规则是需要的，否则它不会被渲染。
#container {...}
#content::before {
content:"";
background-color: #999;
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 50%;
z-index: 1;
}
#content * {
position: relative;
z-index:2;
}
生活例子: https://jsfiddle.net/xraymutation/pwz7t6we/16/
使用在你的图像bg
垂直分割
background-size: 50% 100%
水平中分面
background-size: 100% 50%
例子
.class {
background-image: url("");
background-color: #fff;
background-repeat: no-repeat;
background-size: 50% 100%;
}
