CSS:设置背景颜色,该颜色是窗口宽度的50%

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/

附注:请注意,后面的示例中将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%元素高度内的下一个颜色,创建两种颜色之间看起来非常实线的颜色.

结果如下:

而且,这里是我的jsfiddle!

玩得开心!

Answer 6

在过去必须支持IE8 +的项目中,我使用以data-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.希望它可以帮助某人;)

Answer 7

实现您的问题的一种方法是在 div 的 css 中添加一行：

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

这里是一个演示代码和更多选项（水平、对角线等），你可以点击“运行代码片段”来实时查看。

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

Answer 8

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

小提琴链接

Answer 9

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

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

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

Answer 10

如果你想使用linear-gradient50% 的高度：

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