CSS：设置一个背景色，它是窗口宽度的50%

试图在“一分为二”的页面上实现背景；两种颜色位于相对的两侧（似乎是通过在

主体

标记上设置默认的

背景色

，然后在延伸整个窗口宽度的

div上应用另一种颜色来完成的）

我确实提出了一个解决方案，但不幸的是，
背景大小
属性在IE7/8中不起作用，这是这个项目的必备条件-

body { background: #fff; }
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

因为它只是纯色，也许有一种方法可以只使用常规的
背景色
属性？
旧的浏览器支持
如果必须支持较旧的浏览器，因此不能使用多个背景或渐变，则可能需要在备用的
div
元素上执行类似操作：

#背景{
位置：固定；
排名：0；
左：0；
宽度：50%；
身高：100%；
背景颜色：粉红色；
}

例如：

该解决方案使用了一个额外的固定div，填充了屏幕的一半。因为它是固定的，所以即使用户滚动，它也会保持在原来的位置。稍后您可能需要修改一些z索引，以确保其他元素位于后台div之上，但它不应该太复杂

如果您有问题，只需确保其他内容的z索引高于背景元素，您就可以开始了


现代浏览器
如果您只关心较新的浏览器，则可以使用以下几种其他方法：

线性梯度：

这绝对是最简单的解决方案。可以在主体的“背景”属性中使用线性渐变来获得各种效果

正文{
身高：100%；
背景：线性梯度（90度，#FFC0CB 50%，#00FFFF 50%）；
}

这会导致每种颜色的硬截止值为50%，因此没有顾名思义的“渐变”。试着尝试一下“50%”的风格，看看你能达到的不同效果

例如：

背景大小为的多个背景：

您可以将背景色应用于
html
元素，然后将背景图像应用于
body
元素，并使用
background size
属性将其设置为页面宽度的50%。这会产生类似的效果，但实际上只有在使用一两幅图像时才在渐变上使用

html{
身高：100%；
背景色：青色；
}
身体{
身高：100%；
背景图像：url（'http://i.imgur.com/9HMnxKs.png');
背景重复：重复-y；
背景尺寸：50%自动；
}

例如：


额外注意：注意，在后面的示例中，
html
和
body
元素都设置为
height:100%
。这是为了确保即使您的内容比页面小，背景也至少是用户视口的高度。如果没有明确的高度，背景效果只会下降到页面内容。一般来说，这也是一个很好的实践。
这应该适用于纯css

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));

仅在铬合金中测试。
实现“一分为二”背景的简单解决方案：

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

也可以使用度作为方向

background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);

在过去的一个项目中，我必须支持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;
}

你可以看到它在这里工作。
希望它能帮助别人；）
 这是一个适用于大多数浏览器的示例。

基本上，您使用两种背景色，第一种从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 );

对于不同的调整，您可以使用您可以使用
：after
伪选择器来实现这一点，尽管我不确定该选择器的向后兼容性

body {
    background: #000000
}
body:after {
    content:'';
    position: fixed;
    height: 100%;
    width: 50%;
    left: 50%;
    background: #116699
}

我用它在页面背景上有两个不同的渐变。
用在你的图像背景上

垂直分割

background-size: 50% 100%

background-size: 100% 50%

水平分割

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;
        }


Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、，
`
css
.splitBg{
背景色：#666；
位置：相对位置；
溢出：隐藏；
}
.splitBg：之后{
宽度：50%；
位置：绝对位置；
右：0；
排名：0；
内容：“；
显示：块；
身高：100%；
背景色：#06F；
z指数：1；
}

所以，这是一个非常古老的问题，已经有了一个公认的答案，但我相信如果这个答案在四年前发布的话，它会被选中

我完全用CSS解决了这个问题，没有额外的DOM元素！这意味着这两种颜色纯粹是一个元素的背景色，而不是两个元素的背景色

我使用了渐变，因为我将颜色停止点设置得非常紧密，所以看起来好像颜色是不同的，而且它们是不同的
#container {...}

#content::before {
    content:"";
    background-color: #999;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;    
    width: 50%; 
    z-index: 1;
}


#content * {
  position: relative;
  z-index:2;
}

background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;