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

尝试在“分成两部分”的页面上实现背景; (似乎通过在body标签上设置默认背景颜色，然后将另一个应用到延伸窗口的整个宽度的div上)。

我没有想出一个解决方案，但不幸的是background-size属性不工作在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-index，以确保你的其他元素在背景div之上，但它不应该太复杂。

如果你有问题，只要确保你的内容的其余部分的z-index高于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％。这是为了确保即使您的内容小于页面，背景将至少是用户的视口的高度。没有显式的高度，背景效果只会下降到你的页面内容。这也只是一个好的做法。

原文地址：https://www.jb51.cc/css/223522.html

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

解决方法

相关推荐