问题：
寻求一种将页面背景分割成两种不同颜色的方法，一种颜色占据窗口宽度的 50%。
解决方案：
情况如果旧版浏览器支持至关重要（例如 IE7/8），请考虑利用专用的 div 元素来实现所需效果：
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}固定定位的 div 填充半个屏幕并在滚动时保持原位。
对于现代浏览器，有几种替代方法可用：
利用主体背景属性中的线性渐变提供了一个简单的解决方案：
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}这创建了一个颜色之间的分界线在 50% 处明显mark.
为 html 元素分配背景颜色并应用背景大小设置为 50% 的背景图像到 body 元素会产生类似的结果：
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;
}注意：在后面的示例中，为 html 和 body 设置 height: 100%，以确保背景跨越整个视口，无论页面内容高度如何。
以上是如何在 CSS 中创建双色背景，其中一种颜色占据窗口宽度的 50%？的详细内容。更多信息请关注PHP中文网其他相关文章！
