试图在“分成两部分”的页面上实现背景;在相反两面上的两种颜色（通过在body标签上设置默认background-color，然后将另一个应用到延伸窗口的整个宽度的div上）。CSS：设置窗口宽度的50％的背景颜色
我没有拿出一个解决方案，但不幸的是，background-size属性不会在IE7/8这是该项目必须工作 -
body { background: #fff; }
#wrapper {
background: url(1px.png) repeat-y;
background-size: 50% auto;
width: 100%;
}
因为它只是纯色也许有办法只使用常规的background-color属性？
如果旧的浏览器的支持是必须的，所以你不能用多背景或渐变走，你可能会想要做这样的事情备用div元素：
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
实施例：http://jsfiddle.net/PLfLW/1704/
该解决方案使用一个额外的固定的div填充一半的屏幕。由于它已修复，即使用户滚动，它也会保持原位。之后你可能不得不摆弄一些z-索引，以确保你的其他元素在背景div之上，但它不应该太复杂。
如果您遇到问题，请确保您的其他内容的z-index高于背景元素，并且您应该很好。
如果新的浏览器是你唯一的关注，也有一些其他的方法，你可以使用：
线性渐变：
这绝对是最简单的解决方案。您可以在主体的背景属性中使用线性渐变来获得各种效果。
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
这会导致每种颜色50％的硬切断，所以没有名称所示的“渐变”。尝试使用风格的“50％”部分来查看您可以实现的不同效果。
实施例：http://jsfiddle.net/v14m59pq/2/
多背景与背景尺寸：
您可以将背景颜色设置为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/
EXTRA注：注意的是，htmlbody和元件在实施例中后者设置为height: 100%。这是为了确保即使您的内容小于页面，背景至少也会是用户视口的高度。如果没有明确的高度，背景效果将只会下降到您的页面内容。这也是一般的良好做法。
这应该与纯CSS的工作。
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));
仅在Chrome中进行了测试。
简单的解决方案，实现“一分为二”的背景：
background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);
您也可以使用度的方向
background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);
这很酷，但它是一个渐变。是否有可能做出重大区分？ – 2014-09-12 21:21:16
在过去的项目，必须支持IE8 +，我实现了这个使用以数据网址格式编码的图像。
图像是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。 希望它可以帮助某人;）
这是一个可以在大多数浏览器上运行的例子。
基本上你使用两种背景色，第一个从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/
你可以使用:after伪选择来实现这一点，虽然我不能确定选择的向后兼容性。
body {
background: #000000
}
body:after {
content:'';
position: fixed;
height: 100%;
width: 50%;
left: 50%;
background: #116699
}
我已经在页面背景上使用了这两种不同的渐变。
在图像上使用BG
垂直分割
background-size: 50% 100%
水平分割
background-size: 100% 50%
例
.class {
background-image: url("");
background-color: #fff;
background-repeat: no-repeat;
background-size: 50% 100%;
}
我已经使用:after，它可以在所有主流浏览器中使用。请检查链接。只需要小心z-index，因为在绝对位置之后。
<div class="splitBg">
<div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
<div style="float:left; width:50%; position:relative; z-index:10;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<div style="float:left; width:50%; position:relative; z-index:10;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
</div>
<div style="clear:both;"></div>
</div>
</div>`
css
.splitBg{
background-color:#666;
position:relative;
overflow:hidden;
}
.splitBg:after{
width:50%;
position:absolute;
right:0;
top:0;
content:"";
display:block;
height:100%;
background-color:#06F;
z-index:1;
}
所以，这是一个已经有一个公认的答案的非常古老的问题，但我相信这个答案会被选中了它已经在四年前发布。
我纯粹用CSS解决了这个问题，并且没有额外的DOM元素！这意味着这两种颜色纯粹是一种元素的背景颜色，而不是两种背景颜色。
我使用了渐变，因为我将颜色设置得如此接近，所以看起来好像颜色是不同的，而且它们不混合。
这里是原生语法梯度：
background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
颜色#74ABDD开始于0%，仍然是#74ABDD在49.9%。
然后，我强制将渐变转换为元素高度的0.2%内的下一个颜色，从而创建两种颜色之间看起来非常牢固的线条。
这里是结果：
玩得开心！
您可以通过将第二颜色为0％
例如做一个硬之分，而不是线性渐变，
梯度 - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);
硬盘的区别 - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);
之一实现你的问题的方式来输入你的div中的一行：
background-image: linear-gradient(90deg, black 50%, blue 50%);
这里是一个演示代码和更多的选项（水平，对角线等），你可以点击“运行代码片段”来查看它的实时。
.abWhiteAndBlack
{
background-image: linear-gradient(90deg, black 50%, blue 50%);
height: 300px;
width: 300px;
margin-bottom: 80px;
}
.abWhiteAndBlack2
{
background-image: linear-gradient(180deg, black 50%, blue 50%);
height: 300px;
width: 300px;
margin-bottom: 80px;
}
.abWhiteAndBlack3
{
background-image: linear-gradient(45deg, black 50%, blue 50%);
height: 300px;
width: 300px;
margin-bottom: 80px;
}Vertical:
<div class="abWhiteAndBlack">
</div>
Horizonal:
<div class="abWhiteAndBlack2">
</div>
Diagonal:
<div class="abWhiteAndBlack3">
</div>最防弹和语义正确的选项是使用固定的定位伪元素（: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;
}
工作就像一个魅力，谢谢！ – 2011-12-17 00:00:18
另请参见：z-index：-1 – user956584 2014-08-01 09:51:12
谢谢，它帮助我在表格上实现这种效果：http://jsfiddle.net/c9kp2pde/ – 2015-04-22 15:54:44