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

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

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

您

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