使用线性渐变 CSS 属性时，使用左右作为方向值时，背景显示时没有条纹。但是，当方向值为顶部或底部时，背景中会出现条纹。有什么方法可以去除条纹吗？
这是代码：
body {
background: linear-gradient(to top, red, yellow);
}您正面临着复杂的背景传播，您可以在此处阅读。我将尝试用简单的文字来解释它。
您的body的高度等于 0;因此背景在其上不可见，但默认情况下它具有8px边距，这会在html元素上创建8px的高度。
为什么不是 16px 的高度(顶部 8px + 底部 8px)？
由于主体高度为 0，我们面临边距塌陷，两个边距都将折叠为只有一个，我们的高度为 8px。
然后我们有一个从body到html的背景传播，linear-gradient将覆盖8px的高度。
最后，html的背景被传播到canvas元素，以覆盖整个区域，这解释了为什么线性梯度在每个8px重复。
body {
background: linear-gradient(to top, red, yellow);
}使用左方向或右方向时也会重复此操作，但您不会直观地看到它，这是合乎逻辑的，因为它是相同的模式：
body {
background: linear-gradient(to right, red, yellow);
}您也可以删除重复，您将看到它仅覆盖8px
body {
background: linear-gradient(to right, red, yellow) no-repeat;
}为了避免这种行为，您可以简单地将height:100%(或min-height:100%)设置为html
html {
height: 100%;
}
body {
background: linear-gradient(to top, red, yellow);
}它也适用于no-repeat因为默认情况下，linear-gradient将涵盖整个：
html {
min-height: 100%;
}
body {
background: linear-gradient(to top, red, yellow) no-repeat;
}这是因为<body>的计算高度是由其内容的高度得出的。当小于视口的高度时，背景将重复出现：
body {
background: linear-gradient(to top, red, yellow);
}为了确保它在视口的整个高度上拉伸自身(和背景渐变)，您需要为<body>提供一个与视口高度(100vw)相等的min-height：
body {
background: linear-gradient(to top, red, yellow);
min-height: 100vh;
}
body {
background: linear-gradient(to top, red, yellow);
min-height: 100vh;
margin: 0;
}正如@TemaniAfif评论中指出的那样，上述技术原因是：根元素(覆盖整个视口并从<body>继承其背景)与<body>元素之间存在差异，根据指定，根元素可以小于视口。根据 W3C 建议：
成为画布的背景，并覆盖整个画布，锚定(对于"背景位置")与仅为根元素本身绘制时相同的点。根元素不会再次绘制此背景。