CSS：设置窗口宽度的50％的背景颜色
尝试在“分成两部分”的页面上实现背景; 对面两种颜色（看起来通过在body标签上设置一个默认的background-color ，然后将另一个应用到一个伸展整个窗口宽度的div上）。
我没有想出一个解决scheme，但不幸的是， 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/
该解决scheme使用一个额外的固定格，填补了一半的屏幕。 由于它是固定的，所以即使用户滚动，它也会保持原位。 之后你可能不得不摆弄一些z-索引，以确保你的其他元素在背景div之上，但是不应该太复杂。
如果您遇到问题，请确保您的其他内容的z-index高于背景元素，并且您应该顺利。
现代浏览器
如果您只关注较新的浏览器，则可以使用其他一些方法：
线性渐变：
这绝对是最简单的解决scheme。 您可以在主体的背景属性中使用线性渐变来获得各种效果。
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 NOTE：请注意，在后面的例子中， html和body元素都被设置为height: 100% 。 这是为了确保即使您的内容小于页面，背景至less也会是用户视口的高度。 如果没有明确的高度，背景效果将只会下降到您的页面内容。 一般来说，这也只是一个好的做法。
简单的解决scheme来实现“分裂两个”背景：
background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);
你也可以使用度作为方向
background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);
这应该与纯CSS的工作。
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));
仅在Chrome中进行testing。
在过去的项目中，不得不支持IE8 +，我使用以数据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 。 希望它可以帮助某人;）
所以，这是一个非常古老的问题，已经有了一个可以接受的答案，但是我相信这个答案在四年前就被选中了。
我纯粹用CSS解决了这个问题，而且没有额外的DOM元素！ 这意味着两种颜色纯粹是一种元素的背景颜色，而不是两种背景颜色。
我使用了一个渐变，因为我把颜色设置得如此紧密，所以看起来好像颜色是截然不同的，而且不会混合。
以下是本地语法中的渐变：
background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
颜色#74ABDD从0%开始，仍然是#74ABDD在49.9% 。
然后，我强迫渐变在元素高度的0.2%范围内移动到我的下一个颜色，从而在两种颜色之间创build一条非常实用的线条。
结果如下：
这是我的JSFiddle！
玩的开心！
你可以做一个硬性的区别，而不是线性渐变，把第二个颜色设置为0％
例如，
渐变 – background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);
硬区分 – background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);
你可以使用:after伪select器来实现这一点，但我不确定该select器的向后兼容性。
body { background: #000000 } body:after { content:''; position: fixed; height: 100%; width: 50%; left: 50%; background: #116699 }
我用这个在页面背景上有两个不同的渐变。
我曾经使用过:after它在所有主stream浏览器上都有效。 请检查链接。 只需要注意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; }
小提琴链接
在你的图像上使用bg
垂直分割
background-size: 50% 100%
水平分割
background-size: 100% 50%
例
.class { background-image: url(""); background-color: #fff; background-repeat: no-repeat; background-size: 50% 100%; }
其中一种方法来实现你的问题在你的div内input一行：
background-image: linear-gradient(90deg, black 50%, blue 50%);
这里有一个演示代码和更多的选项（水平，对angular线等），你可以点击“运行代码片段”来查看它的实况。
.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>
这是一个可以在大多数浏览器上运行的例子。
基本上你使用两种背景颜色，第一种是从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/
