【问题标题】：CSS: Set a background color which is 50% of the width of the windowCSS：设置背景颜色为窗口宽度的 50%
【发布时间】：2012-01-22 09:18:41
【问题描述】：

试图在“一分为二”的页面上实现背景；对面有两种颜色（似乎是通过在body 标签上设置默认的background-color，然后将另一种颜色应用到延伸整个窗口宽度的div 上）。

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

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

既然它只是纯色，也许有一种方法只使用常规的background-color 属性？

【问题讨论】：

标签： css background-color

【解决方案1】：

解决问题的一种方法是在 div 的 css 中添加一行：

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

这里是演示代码和更多选项（水平、对角线等），你可以点击“运行代码sn-p”来现场查看。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

最防弹和语义正确的选择是使用固定位置的伪元素（::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/

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

旧版浏览器支持

如果必须支持较旧的浏览器，因此您不能使用多个背景或渐变，您可能会想要在备用的 div 元素上做这样的事情：

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

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

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

如果您有问题，只需确保其余内容的 z-index 高于背景元素即可。

现代浏览器

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

线性渐变：

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

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/

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

【讨论】：

linear-gradient 硬截止也适用于像素：background: linear-gradient(90deg, #FFC0CB 225px, #00FFFF 0, #00FFFF 100%);
它适用于 50% 50%，但是当我替换为 25% 75% 时它不起作用
@datdinhquoc 试试background: linear-gradient(90deg, #FFC0CB 25%, #00FFFF 0);。

【解决方案6】：

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

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

我使用了渐变，因为我将色标设置得如此紧密，所以看起来颜色是不同的，而且它们没有混合。

这是原生语法中的渐变：

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

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

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

结果如下：

还有here's my JSFiddle!

玩得开心！

【讨论】：

甚至可以使用像素。 background: repeating-linear-gradient(var(--grayLight), var(--grayLight) 430px, rgba(0,0,0,0) 201px, rgba(0,0,0,0) 100%);

【解决方案7】：

您可以通过将第二种颜色设置为 0% 来进行硬区分而不是线性渐变

例如，

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

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

【讨论】：

【解决方案8】：

在过去必须支持 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 看到它的工作原理。希望它可以帮助某人；）

【讨论】：

【解决方案9】：

我使用过: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

【讨论】：

【解决方案10】：

在你的图片背景上使用

垂直分割

background-size: 50% 100%

水平分割

background-size: 100% 50%

示例

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

【讨论】：

如何在中心设置这个背景
试试：background-position: center center

【解决方案11】：

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

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

我已经使用它在页面背景上有两种不同的渐变。

【讨论】：

所有浏览器都支持这种技术，很好的解决方案！如果您不想要固定效果，也可以使用相对父级的绝对位置。

【解决方案12】：

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

【讨论】：

【解决方案13】：

实现后台“一分为二”的简单解决方案：

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

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

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

【讨论】：

这很酷，但它是渐变的。是否有可能做出严格的区分？
要明确区分这两种颜色，请使用下面的 akash 答案，将第二个百分比设置为 0%：background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

【解决方案14】：

这应该适用于纯 css。

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

仅在 Chrome 中测试。

【讨论】：