Html 带有3种水平颜色的网站正文背景

有没有一种方法可以使用CSS在网页上显示3种不同大小的水平颜色

我正在为一家俱乐部创建一个网页，希望它能以黑白对比的背景更加突出

我希望它看起来像这样，颜色之间没有褪色：

我试过这个代码。但是，颜色的高度仅覆盖页面的一小部分

body {
height: 100vh
width: 100vw;    
background-image: linear-gradient(white 10%, black 50%, white 40%);
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 0px;   
}

---

从您提供的图像来看，它似乎正在按预期工作。渐变的第一部分为白色，中间部分为黑色，第三部分为白色。如果要确保渐变填充整个页面并随视口流动，可以使用

给

一个

背景附件

值

固定

。这将使

背景图像

位置在视口中固定。我利用颜色停止点更新了使用方法，使颜色不会在节之间褪色。这是通过定义渐变线的起点和终点位置来实现的。渐变中的每个部分不会流入其相邻颜色，但会显示颜色之间的明显区别

正文{
最小高度：100vh；
身高：100%；
宽度：100vw；
背景图像：线性渐变（至底部，红色10%，绿色10%60%，蓝色60%）；
背景大小：100%100%；
背景重复：无重复；
背景附件：固定；
边际：0px；
}

给你：

html{
高度：100vh；
背景重复：无重复；
背景附件：固定；
背景：rgb（255、255、255）；
背景：线性梯度（180度，rgba（255，255，255，1）15%，rgba（0，0，0，1）15%，rgba（0，0，0，1）65%，rgba（255，255，255，1）65%）；
}

坡度

添加删除颜色升级的步骤

正文{
高度：100vh；
宽度：100vw；
边际：0px；
背景：线性梯度(
归根结底，
白色0，
白色10%，
黑色10%，
黑色60%，
白色60%，
白色100%
);
}

---

@rodger如果我的答案解决了您的问题，请随时将其标记为已接受。