css – 如何删除使用线性渐变属性时出现的条纹

body {
  BACkground: linear-gradient(to top,red,yellow);
}

你正面临一个复杂的背景传播,你可以阅读关于 here.我将尝试用简单的单词解释它.

首先你的身体元素有0高度,因此背景将不可见,但默认情况下它有8px的边距,在html元素上创建8px的高度.

为什么不是16px的高度(8px的顶部8px为底部)？

由于身体的高度为0,我们面临margin collpasing,因此两个边距将只折叠成一个,我们的高度为8px

然后我们将body的背景传播到html,因此线性渐变将覆盖8px高度.

最后,html的背景传播到根元素以覆盖整个区域,这解释了线性渐变重复每个8px.

body {
  BACkground: linear-gradient(to top,yellow);
}

当使用向左或向右方向时也会重复它,但你不会在视觉上看到它是逻辑的,因为它是相同的模式：

body {
  BACkground: linear-gradient(to right,yellow);
}

为了避免这种行为,你可以简单地将高度：100％设置为html

html {
  height: 100%;
}

body {
  BACkground: linear-gradient(to top,yellow);
}