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

Question

当使用线性渐变CSS 属性时，当使用左右作为方向值时，背景出现无条纹。但是当方向值被指定为顶部或底部时，背景中会出现条纹。有什么办法可以去掉条纹吗？

代码如下：

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

Answer 1

这是因为 <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 Recommendation:

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

Answer 2

您面临着复杂背景传播，您可以阅读有关 here 的内容。我会尽量用简单的文字来解释。

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

为什么不是 16px 的高度（顶部 8px + 底部 8px）？

由于 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;
}

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

How to remove the stripes that appears when using linear gradient property

css

background

linear-gradients