CSS:设置背景色为窗口宽度的50%

试图在“一分为二”的页面上实现背景;两种相对的颜色(似乎是通过在body标签上设置默认的背景色来完成的，然后将另一种颜色应用到扩展整个窗口宽度的div上)。

我确实提出了一个解决方案，但不幸的是，背景大小的属性不工作在IE7/8，这是一个必须为这个项目-

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

既然它只是关于纯色，也许有一种方法只使用常规的背景颜色属性?

当前回答

旧浏览器支持

如果旧的浏览器支持是必须的，所以你不能使用多个背景或渐变，你可能会想在一个空闲的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/

使用background-size的多个背景:

您可以将背景颜色应用到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%。这是为了确保即使你的内容比页面小，背景也至少是用户视口的高度。如果没有明确的高度，背景效果只会和你的页面内容一样低。一般来说，这也是一种很好的练习。

2011-12-16 23:59:20

其他回答

.background { background: -webkit-linear-gradient(top， #2897e0 40%， #F1F1F1 40%); 身高:200 px; ｝ .background2 { 背景:-webkit-linear-gradient(右，#2897e0 50%， #28e09c 50%); 身高:200 px; ｝ < html > <身体类=“1”> < div class = "背景" > < / div > < div class = " background2”> < / div > < /身体> < / html >

2019-09-07 13:18:31

使用在你的图像bg

垂直分割

background-size: 50% 100%

水平中分面

background-size: 100% 50%

例子

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

2014-12-15 21:23:31

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

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

我使用了渐变，因为我把颜色设置得非常接近，所以看起来好像颜色是不同的，它们没有混合。

下面是原生语法中的梯度:

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

颜色#74ABDD开始为0%，仍然为#74ABDD为49.9%。

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

结果如下:

这是我的JSFiddle!

玩得开心!

2015-04-15 18:46:23