html 页面宽度和背景颜色,CSS：设置背景颜色为窗口宽度的50％

旧版浏览器支持

如果旧的浏览器支持是必须的，所以你不能去使用多个背景或渐变，你可能要在备用的div元素上做这样的事情：

#background {

position: fixed;

top: 0;

left: 0;

width: 50%;

height: 100%;

background-color: pink;

}

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

如果你有问题，只要确保你的内容的其余部分的z-index高于background元素，你应该很好去。

现代浏览器

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

线性渐变：

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

body {

height: 100%;

background: linear-gradient(90deg,#FFC0CB 50%,#00FFFF 50%);

}

这导致对于每种颜色的50％的硬截止，因此没有顾名思义的“渐变”。尝试尝试使用“50％”样式的风格，以查看您可以实现的不同效果。

与背景大小的多背景：

您可以将背景颜色应用于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;

}

EXTRA注意：请注意，在后面的示例中，html和body元素都设置为height：100％。这是为了确保即使您的内容小于页面，背景将至少是用户的视口的高度。没有显式的高度，背景效果只会下降到你的页面内容。这也只是一个好的做法。