使用线性渐变CSS属性时，使用左和右作为方向值时背景显示为无条纹。但是，当方向值指定为顶部或底部时，背景中会出现条纹。有什么方法可以去除条纹？
代码如下：
body {
background: linear-gradient(to top, red, yellow);
}
#1 楼
您正面临着复杂的背景传播，您可以在此处阅读。我将尝试用简单的单词来解释它。您的
body的高度等于0；因此背景将在其上不可见，但是默认情况下它具有8px的边距，这会在8px元素上创建一个高度为html。为什么高度不为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;
}
评论
好吧，我似乎明白了。一切背后都有无限的画布内容。 html就像是无限内容的视口。并且，由于某些原因，如果html / document的大小不足以填充浏览器窗口，则其余的内容（通过传播）将被绘制在无限的“画布”上。
–里克
19-09-25在9:21
非常感谢。但是有一个问题：我在您的答案中访问了W3C链接，然后环顾了四周。我没有发现任何描述，例如“将重复html以填充无限画布”之类的描述。
–里克
19-09-25在9:24
@Rick检查以下示例：jsfiddle.net/8jv9gxpw ..了解边框如何仅覆盖主体的8px边距，而背景如何覆盖整个区域。因此，HTML不能填充所有区域。仅使用其背景填充该区域
– Temani Afif
19-09-25在9:28
@Rick是的，它将重复，但是只有背景会重复，而不是您在其他评论中所述的html。诀窍就在那里。 html的高度低于画布，该高度的背景将被使用并在画布上重复。这就是为什么使html的高度等于canvas（height：100％）可以避免这种重复的原因。
– Temani Afif
19-09-25在9:39
@Rick好吧，如果我们想精确地定义画布，那就更棘手了。是的，根据分隔符（w3.org/TR/CSS2/intro.html#the-canvas），它是无限的，但是在现实世界中不存在无限，并且有一个定义区域可以绘制画布。换句话说，我们看不见浏览器，因此可以说浏览器某种程度上限制了我们看到的画布区域。这就是说，如果您将html设置为100％，则至少可以确定它会覆盖我们看到的画布的可视区域，但从技术上讲，它将与画布有所不同
– Temani Afif
19-09-25在10:07
#2 楼
这是因为<body>的计算高度是由其内容的高度得出的。当小于视口的高度时，背景会重复自身： body {
background: linear-gradient(to top, red, yellow);
}
要确保它在视口的整个高度上伸展（和背景渐变），您需要给
<body>一个min-height，它等于视口的高度（100vw）： 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建议：根元素的背景成为画布的背景，并覆盖整个画布，并在与画布相同的位置锚定（“背景位置”）如果仅针对根元素本身进行绘制的话。根元素不会再次绘制此背景。
评论
我猜您应该提到它在根元素上重复，因为存在背景传播并且根元素是全屏高度
– Temani Afif
18年1月29日在13:42
谢谢@andrei。很好
–巴拉
18年1月29日在13:43
而且它比简单的背景传播还要复杂，我试图在一个答案上进行解释，但并不容易：s ...问题是主体的边距为8px，这使得html的高度为8px，而这个边距采用线性从第一次传播开始，将其作为背景图像进行渐变，从而覆盖8px，然后第二次传播到根元素，保持背景大小不变，并简单地重复一下，我们得到了这个结果！ ...使身体边缘：0，我们将不再有背景！
– Temani Afif
18年1月29日在14:17
@Temani，我认为我的回答就技术数据而言已足够。重点是简要解释正在发生的事情并提供实用的解决方案。不解释整个规格。对更多详细信息感兴趣的人可以在链接的规范或MDN中找到它们。
– tao
18年1月29日在14:19
我不是在抱怨您的回答；）因为您没有义务解释整个过程，但我想对于像我这样有点好奇的人，即使我们可以做到，也要清楚地了解正在发生的事情很重要。这就是为什么要发表评论，以便人们可以找到一些线索来进行更多的搜索和了解。 [通过做html {height：100％}也可以解决问题]
– Temani Afif
18年1月29日在14:25
评论
您能解释这些问题之间的共同点吗？我不明白它们之间的关系。如果您可以包含一个屏幕截图与另一个屏幕截图，则可能会改善此问题-您很难通过描述来说明发生了什么，以及预期结果是什么。