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

使用线性渐变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);
}