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

Question

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

这是代码：

body {

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

}

Answer 1

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

您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;

}