较旧的浏览器支持

Question

尝试在“分为两部分”的页面上获得背景;两侧有两种颜色（看似通过在background-color标签上设置默认body，然后将另一种应用到展开窗口整个宽度的div上。

我确实提出了一个解决方案，但不幸的是background-size属性在IE7 / 8中不起作用，这是该项目必须的 -

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

因为它只是纯色而有可能只使用常规的background-color属性？

Answer 1

较旧的浏览器支持

如果必须使用较旧的浏览器支持，那么您不能使用多个背景或渐变，那么您可能希望在备用div元素上执行此类操作：

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

示例：http://jsfiddle.net/PLfLW/1704/

该解决方案使用额外的固定div填充屏幕的一半。由于它已修复，即使用户滚动，它也会保持在原位。你可能不得不稍后调整一些z索引，以确保你的其他元素高于背景div，但它不应该太复杂。

如果您遇到问题，请确保您的其他内容的z-index高于背景元素，您应该很高兴。

现代浏览器

如果您只关注较新的浏览器，可以使用其他几种方法：

线性渐变：

这绝对是最简单的解决方案。您可以在body的background属性中使用线性渐变来获得各种效果。

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注意：请注意，在后面的示例中，html和body元素都设置为height: 100%。这是为了确保即使您的内容小于页面，背景也至少是用户视口的高度。如果没有明确的高度，背景效果将只会下降到您的页面内容。这也是一般的好习惯。

Answer 2

实现“分为两部分”背景的简单解决方案：

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

您也可以使用度数作为方向

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

Answer 3

通过将第二种颜色设置为0％

，可以进行硬性区分而不是线性渐变

例如，

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

难以区分 - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Answer 4

这应该适用于纯CSS。

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

仅在Chrome中测试。

Answer 5

所以，这是一个非常古老的问题，已经有了一个已经接受的答案，但我相信这个答案会在四年前发布时被选中。

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

我使用渐变，因为我将颜色设置得如此紧密地结合在一起，看起来好像颜色是不同的，并且它们不会混合。

以下是本机语法中的渐变：

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

颜色#74ABDD从0%开始，在#74ABDD处仍为49.9%。

然后，我强制渐变移动到元素高度0.2%内的下一个颜色，创建两种颜色之间看起来非常实线的颜色。

结果如下：

Split Background Color

here's my JSFiddle!

玩得开心！

Answer 6

在过去必须支持IE8 +的项目中，我使用以data-url格式编码的图像实现了这一目标。

图像为2800x1像素，图像白色的一半，半透明。工作得很好。

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。希望它可以帮助某人;）

Answer 7

我使用了:after，它适用于所有主流浏览器。请检查链接。只需要小心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;
        }

fiddle link

Answer 8

如果您想使用高度为50％的linear-gradient：

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

Answer 9

在你的形象上使用bg

垂直拆分

background-size: 50% 100%

横向拆分

background-size: 100% 50%

示例

.class { background-image: url(""); background-color: #fff; background-repeat: no-repeat; background-size: 50% 100%; }

Answer 10

您可以使用:after伪选择器来实现此目的，但我不确定该选择器的向后兼容性。

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

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

Answer 11

实现您的问题的一种方法是在div中输入一行：

background-image: linear-gradient(90deg, black 50%, blue 50%);

这是一个演示代码和更多选项（水平，对角线等），您可以点击＆＃34;运行代码片段＆＃34;看它活着。

＆＃13;

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

＆＃13;

Vertical:

  <div class="abWhiteAndBlack">
  </div>


Horizonal:

  <div class="abWhiteAndBlack2">
    
  </div>


Diagonal:

  <div class="abWhiteAndBlack3">
    
  </div>

＆＃13;

Answer 12

最防弹和语义正确的选项是使用固定位置的伪元素（:after或:before）。使用此技术不要忘记将z-index设置为容器内的元素。还要注意，需要content:""伪元素规则，否则它将不会被渲染。

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

实例： https://jsfiddle.net/xraymutation/pwz7t6we/16/

Answer 13

这是一个适用于大多数浏览器的示例基本上你使用两种背景颜色，第一种颜色从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/

Answer 14

.background{
 background: -webkit-linear-gradient(top, #2897e0 40%, #F1F1F1 40%);
 height:200px;
 
}

.background2{
  background: -webkit-linear-gradient(right, #2897e0 50%, #28e09c 50%);

 height:200px;
 
}

<html>
<body class="one">

<div class="background">
</div>
<div class="background2">
</div>
</body>
</html>

CSS：设置背景颜色，该颜色是窗口宽度的50％

14 个答案:

较旧的浏览器支持

现代浏览器