试图在“一分为二”的页面上实现背景；相对两侧的两种颜色，使用线性渐变执行此操作，但如果某些元素（div）大高度背景颜色重复
<body>
<div class="blocktest">
test
</div>
</body>
css :
body {
background-image: linear-gradient(#000 50%, #ffffff 0%);
height:100vh;
}
.blocktest {
height:1500px;
}
我想要 50% 的页面颜色 1，其余的页面颜色是颜色 2
使用min-height代替height：
body {
background-image: linear-gradient(#000 50%, #ffffff 0%);
min-height: 100vh;
}
.blocktest {
height: 1500px;
}<div class="blocktest">
test
</div>实际上，您body仅限于100vh并且背景正在传播到根元素以覆盖整个屏幕。所以你会看到 2 个背景，一个是根元素，一个是在它上面的是身体。
如果您保留height:100vh并添加另一个背景，html您会注意到这一点：
body {
background-image: linear-gradient(#000 50%, #ffffff 0%);
height: 100vh;
}
.blocktest {
height: 1500px;
}
html {
background:pink;
}<div class="blocktest">
test
</div>如果您只想覆盖100vh背景，请将背景设为html白色或禁用重复：
body {
background-image: linear-gradient(#000 50%, #ffffff 0%);
height: 100vh;
/* Or background-repeat:no-repeat */
margin:0;
}
.blocktest {
height: 1500px;
}
html {
background:white;
}<div class="blocktest">
test
</div>另一个相关问题：如何去除使用线性渐变属性时出现的条纹