试图在“一分为二”的页面上实现背景;两种相对的颜色(似乎是通过在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中测试。
其他回答
这是一个可以在大多数浏览器上运行的示例。 基本上你使用两种背景颜色，第一种颜色从0%开始，以50%结束，第二种颜色从51%开始，以100%结束
我使用水平方向:
background: #000000;
background: -moz-linear-gradient(left, #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );
要进行不同的调整，您可以使用http://www.colorzilla.com/gradient-editor/
所以，这是一个非常古老的问题，已经有了一个公认的答案，但我相信，如果这个答案是在四年前发布的，它就会被选中。
我完全用CSS解决了这个问题，没有额外的DOM元素!这意味着这两种颜色是纯粹的，只是一个元素的背景色，而不是两个元素的背景色。
我使用了渐变，因为我把颜色设置得非常接近，所以看起来好像颜色是不同的，它们没有混合。
下面是原生语法中的梯度:
background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
颜色#74ABDD开始为0%，仍然为#74ABDD为49.9%。
然后，我强制渐变到元素高度的0.2%以内的下一个颜色，在两个颜色之间创建一个看起来非常坚实的线。
结果如下:
这是我的JSFiddle!
玩得开心!
最可靠且语义正确的选项是使用定位固定的伪元素(::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/
你可以使用:after伪选择器来实现这一点，尽管我不确定该选择器的向后兼容性。
body {
background: #000000
}
body:after {
content:'';
position: fixed;
height: 100%;
width: 50%;
left: 50%;
background: #116699
}
我用它在页面背景上有两种不同的渐变。
.background { background: -webkit-linear-gradient(top， #2897e0 40%， #F1F1F1 40%); 身高:200 px; ｝ .background2 { 背景:-webkit-linear-gradient(右，#2897e0 50%， #28e09c 50%); 身高:200 px; ｝ < html > <身体类=“1”> < div class = "背景" > < / div > < div class = " background2”> < / div > < /身体> < / html >
