较旧的浏览器支持
如果必须有较旧的浏览器支持,那么您就不能同时使用多个背景或渐变,那么您可能需要对备用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%。这是为了确保即使您的内容小于页面,背景也将至少是用户视口的高度。没有明确的高度,背景效果将仅下降到页面内容。一般来说,这也是一个很好的做法。