CSS：将背景色设置为窗口宽度的50％

155

试图在“分成两部分”的页面上获得背景；相对两侧的两种颜色（似乎是通过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属性的方法吗？

css  background-color 
— 斯塔凡·埃斯特伯格
source

Answers:

280

较旧的浏览器支持

如果必须有较旧的浏览器支持，那么您就不能同时使用多个背景或渐变色，则可能需要在备用div元素上执行以下操作：

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

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

该解决方案使用一个额外的固定div来填充屏幕的一半。由于它是固定的，因此即使您的用户滚动它也将保持在原位。您稍后可能需要摆弄一些z索引，以确保您的其他元素位于背景div上方，但不要太复杂。

如果遇到问题，只需确保其余内容的z索引高于背景元素，就可以了。

现代浏览器

如果仅是较新的浏览器，则可以使用其他两种方法：

线性渐变：

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

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%。这是为了确保即使您的内容小于页面，背景也将至少是用户视口的高度。没有明确的高度，背景效果将仅下降到页面内容。一般来说，这也是一个很好的做法。

— 公正
source
谢谢，它帮助我在一张桌子上达到了这种效果：jsfiddle.net/c9kp2pde
11
该linear-gradient硬截止也适用于像素：background: linear-gradient(90deg, #FFC0CB 225px, #00FFFF 0, #00FFFF 100%);
— 雅各布面包车林根
1
它适用于50％50％，但是当我替换为25％75％时
— 不起作用
5
@datdinhquoc尝试background: linear-gradient(90deg, #FFC0CB 25%, #00FFFF 0);。
— justisb
55

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

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

您也可以将度数用作方向

background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);
— 朱尼佩里
source
14
这很酷，但是它是渐变的。可以做出严格的区分吗？
— 约翰·吉奥塔
23

您可以通过将第二种颜色设置为0％来区分线性梯度而不是线性梯度

例如，

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

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

— 阿卡什
source
17

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

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

我使用了渐变，因为我将颜色停止点设置得非常紧密，所以看起来好像颜色是鲜明的并且不会混合。

这是本机语法中的渐变：

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

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

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

结果如下：

分割背景色

而且，这里是我的jsfiddle！

玩得开心！

— Web流浪者
source
一个甚至可以带有像素。background: repeating-linear-gradient(var(--grayLight), var(--grayLight) 430px, rgba(0,0,0,0) 201px, rgba(0,0,0,0) 100%);
— 菲利普
12

这应该与纯CSS一起工作。

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

仅在Chrome中进行了测试。

— 麦可
source
9

在过去必须支持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;
}

您可以在这里看到它在JsFiddle中工作。希望它可以帮助某人;）

— 普图科
source
4

我已经使用过，: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;
        }

小提琴链接

— 用户名
source
3

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

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

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

— Awaterujin
source
1
所有浏览器都支持此技术，这是很好的解决方案！如果您不想使用固定效果，也可以在相对亲戚中使用绝对位置。
— 亚当·史密斯
3

在图片上使用bg

垂直分割

background-size: 50% 100%

水平分割

background-size: 100% 50%

例

.class {
   background-image: url("");
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: 50% 100%;
}
— 扬·拉诺斯塔杰（Jan Ranostaj）
source
我如何在中心设置背景
— Vaibhav Ahalpara
1
试试： background-position: center center
— Jan Ranostaj
3

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

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>
展开摘要

— 纳达夫
source
2

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

— Arkadiusz Lendzian
source
1 

.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>
展开摘要

— 桑达拉姆·塞斯
source
0

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

— 索林·海道
source
0

如果要使用linear-gradient50％的高度：

background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;
— 阮阮
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.