试图在“一分为二”的页面上实现背景;两种相对的颜色(似乎是通过在body标签上设置默认的背景色来完成的，然后将另一种颜色应用到扩展整个窗口宽度的div上)。
我确实提出了一个解决方案，但不幸的是，背景大小的属性不工作在IE7/8，这是一个必须为这个项目-
body { background: #fff; }
#wrapper {
background: url(1px.png) repeat-y;
background-size: 50% auto;
width: 100%;
}
既然它只是关于纯色，也许有一种方法只使用常规的背景颜色属性?
当前回答
这应该与纯css工作。
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));
仅在Chrome中测试。
其他回答
旧浏览器支持
如果旧的浏览器支持是必须的，所以你不能使用多个背景或渐变，你可能会想在一个空闲的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%。这是为了确保即使你的内容比页面小，背景也至少是用户视口的高度。如果没有明确的高度，背景效果只会和你的页面内容一样低。一般来说，这也是一种很好的练习。
这应该与纯css工作。
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));
仅在Chrome中测试。
你可以通过将第二种颜色设置为0%来实现线性渐变
例如,
梯度:梯度(80deg, ff0000 20%， 0000ff 80%);
硬区分-背景:线性渐变(80度，#ff0000 20%， #0000ff 0%);
实现“一分为二”背景的简单解决方案:
background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);
你也可以用角度来表示方向
background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);
在过去的一个必须支持IE8+的项目中，我使用data-url格式编码的图像实现了这一点。
图像是2800x1px，一半白色，一半透明。 工作得很好。
body {
/* 50% right white */
background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;
/* 50% left white */
background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}
你可以看到它在JsFiddle中工作。 希望它能帮助到别人;)
