试图在“一分为二”的页面上实现背景;两种相对的颜色(似乎是通过在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中测试。
其他回答
在过去的一个必须支持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中工作。 希望它能帮助到别人;)
如果你想使用50%高度的线性梯度:
background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;
使用在你的图像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指数，因为后面有绝对位置。
<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%开始，以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/
