div的左半部分和右半部分的背景颜色不同

Question

我有一个居中的div布局.背景中div的左侧应为白色,右侧应为绿色.两者都应扩展到无穷大.

我认为它应该很简单,但我现在还没有理解.任何简单的方案？谢谢!

-----------------------------------------------------
(div 1)     __________________________ 
           |(div 2)         |         |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|

------------------------------------------------------

Answer 1

使用::after和::beforepsuedo元素.这样你甚至可以得到三种颜色并做意大利国旗!

div {
    height:300px;
    width:100%;
    outline:thin solid black;
    position:relative;
    background:white;
}
div::after, div::before {
    height:300px;
    content:' ';
    position: absolute;
    top: 0;
    width: 33%;
}
div::after {
    right: 0;
    background-color: red;
}
div::before {
    left: 0;
    background-color: green;
}

这是一个小提琴:http://jsfiddle.net/g8p9pn1v/

结果如下:

Answer 2

将具有两种颜色的背景图像添加到外部div并允许浏览器缩放它(而不是平铺它).

每种颜色应恰好填充图像宽度的50%,以确保颜色永远不会泄漏.

甚至可能将图像放在内部div的后面.

有关如何拉伸图像的想法,请参阅此问题:CSS背景重复