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

Question

<分区>

Answer 1

您正面临一个复杂 背景传播，您可以阅读有关 here 的信息.我将尝试用简单的词来解释它。

你的 body 的高度等于 0；因此背景在其上不可见，但默认情况下它有 8px 的边距，这会在 html 元素上创建 8px 的高度。

---

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

由于 body 的高度为 0，我们面临着 margin collpasing并且两个边距将合并为一个，我们的高度为 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;
}