您正面临着 复杂的 背景传播，您可以在此处阅读。我将尝试用简单的词来解释它。
您body的身高等于0；因此背景将在背景上不可见，但是默认情况下它具有在元素上8px创建高度的边距。8px``html
由于主体的高度为0，因此我们面临着边距崩溃的情况，并且两个边距都将收缩为1，并且高度为8px。
然后我们有一个从body到的背景传播，html并且linear-gradient将覆盖 高度。
最后，将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因为默认情况下a linear-gradient将覆盖全部内容：
html {
min-height: 100%;
}
body {
background: linear-gradient(to top, red, yellow) no-repeat;
}
602392714
清零编程群