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>继承其背景）和{{1}之间存在差异} element，如指定的，可以小于视口。根据{{3}}：

根元素的背景成为画布的背景并覆盖整个画布，锚定（对于“背景位置”）与在仅为根元素本身绘制时相同的点。根元素不会再次绘制此背景。

Answer 2

您正面临复杂背景传播，您可以阅读here。我将尝试用简单的词语来解释它。

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

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

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

然后我们有body到html的背景传播，linear-gradient将覆盖 8px 高度。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

你也可以删除重复内容，你会看到它只覆盖8px

＆＃13;

body {
  background: linear-gradient(to right, red, yellow) no-repeat;
}

＆＃13;

为了避免此行为，您只需将height:100%设置为html

即可

＆＃13;

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

＆＃13;

它也适用于no-repeat，因为默认情况下linear-gradient将涵盖整个：{/ p>

＆＃13;

html {
  height: 100%;
}

body {
  background: linear-gradient(to top, red, yellow) no-repeat;
}

＆＃13;