试图在“一分为二”的页面上实现背景;两种相对的颜色(似乎是通过在body标签上设置默认的背景色来完成的，然后将另一种颜色应用到扩展整个窗口宽度的div上)。
我确实提出了一个解决方案，但不幸的是，背景大小的属性不工作在IE7/8，这是一个必须为这个项目-
body { background: #fff; }
#wrapper {
background: url(1px.png) repeat-y;
background-size: 50% auto;
width: 100%;
}
既然它只是关于纯色，也许有一种方法只使用常规的背景颜色属性?
当前回答
你可以使用: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%;
}
这应该与纯css工作。
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));
仅在Chrome中测试。
你可以使用:after伪选择器来实现这一点，尽管我不确定该选择器的向后兼容性。
body {
background: #000000
}
body:after {
content:'';
position: fixed;
height: 100%;
width: 50%;
left: 50%;
background: #116699
}
我用它在页面背景上有两种不同的渐变。
实现你的问题的一种方法是添加一行到你的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%);
