试图在“一分为二”的页面上实现背景;两种相对的颜色(似乎是通过在body标签上设置默认的背景色来完成的，然后将另一种颜色应用到扩展整个窗口宽度的div上)。
我确实提出了一个解决方案，但不幸的是，背景大小的属性不工作在IE7/8，这是一个必须为这个项目-
body { background: #fff; }
#wrapper {
background: url(1px.png) repeat-y;
background-size: 50% auto;
width: 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>
实现“一分为二”背景的简单解决方案:
background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);
你也可以用角度来表示方向
background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);
我用过:after，它在所有主流浏览器中都能运行。请查看链接。只需要注意z指数，因为后面有绝对位置。
<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;
}
小提琴的链接
你可以通过将第二种颜色设置为0%来实现线性渐变
例如,
梯度:梯度(80deg, ff0000 20%， 0000ff 80%);
硬区分-背景:线性渐变(80度，#ff0000 20%， #0000ff 0%);
所以，这是一个非常古老的问题，已经有了一个公认的答案，但我相信，如果这个答案是在四年前发布的，它就会被选中。
我完全用CSS解决了这个问题，没有额外的DOM元素!这意味着这两种颜色是纯粹的，只是一个元素的背景色，而不是两个元素的背景色。
我使用了渐变，因为我把颜色设置得非常接近，所以看起来好像颜色是不同的，它们没有混合。
下面是原生语法中的梯度:
background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
颜色#74ABDD开始为0%，仍然为#74ABDD为49.9%。
然后，我强制渐变到元素高度的0.2%以内的下一个颜色，在两个颜色之间创建一个看起来非常坚实的线。
结果如下:
这是我的JSFiddle!
玩得开心!
