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