如何在 CSS 中创建双色背景，其中一种颜色占据窗口宽度的 50%？

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

问题：

寻求一种将页面背景分割成两种不同颜色的方法，一种颜色占据窗口宽度的 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中文网其他相关文章！