这是一个可以在大多数浏览器上运行的示例。 基本上你使用两种背景颜色，第一种颜色从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/

旧浏览器支持

如果旧的浏览器支持是必须的，所以你不能使用多个背景或渐变，你可能会想在一个空闲的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%。这是为了确保即使你的内容比页面小，背景也至少是用户视口的高度。如果没有明确的高度，背景效果只会和你的页面内容一样低。一般来说，这也是一种很好的练习。

如果你想使用50%高度的线性梯度:

background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;

实现你的问题的一种方法是添加一行到你的div的css:

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>

所以，这是一个非常古老的问题，已经有了一个公认的答案，但我相信，如果这个答案是在四年前发布的，它就会被选中。

我完全用CSS解决了这个问题，没有额外的DOM元素!这意味着这两种颜色是纯粹的，只是一个元素的背景色，而不是两个元素的背景色。

我使用了渐变，因为我把颜色设置得非常接近，所以看起来好像颜色是不同的，它们没有混合。

下面是原生语法中的梯度:

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

颜色#74ABDD开始为0%，仍然为#74ABDD为49.9%。

然后，我强制渐变到元素高度的0.2%以内的下一个颜色，在两个颜色之间创建一个看起来非常坚实的线。

结果如下:

这是我的JSFiddle!

玩得开心!

你可以使用:after伪选择器来实现这一点，尽管我不确定该选择器的向后兼容性。

body {
    background: #000000
}
body:after {
    content:'';
    position: fixed;
    height: 100%;
    width: 50%;
    left: 50%;
    background: #116699
}

我用它在页面背景上有两种不同的渐变。