较旧的浏览器支持
如果必须有较旧的浏览器支持，那么您就不能同时使用多个背景或渐变，那么您可能需要对备用div元素执行以下操作：
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
该解决方案使用一个额外的固定div来填充屏幕的一半。由于它是固定的，因此即使您的用户滚动，它也将保持在原位。您稍后可能需要弄弄一些z索引，以确保您的其他元素位于背景div上方，但不要太复杂。
如果遇到问题，只需确保其余内容的z索引高于背景元素，就可以了。
现代浏览器
如果仅是较新的浏览器，则可以使用其他两种方法：
线性渐变：
这绝对是最简单的解决方案。您可以在主体的背景属性中使用线性渐变以获得各种效果。
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('/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;
}
额外的注意： 请注意，在后面的示例中，html和body元素均设置为height:100%。这是为了确保即使您的内容小于页面，背景也将至少是用户视口的高度。没有明确的高度，背景效果将仅下降到页面内容。一般来说，这也是一个很好的做法。
