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

This question already has answers here:

Why does styling the background of the body element affect the entire screen?
                                
                                    （7个答案）
                                
                        
                                2年前关闭。
            
                    
当使用线性渐变CSS属性时，使用左和右作为方向值时背景显示为无条纹。但是，当方向值指定为顶部或底部时，背景中会出现条纹。有什么办法可以消除条纹？

这是代码：

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

最佳答案

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

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



为什么不设置高度16像素（顶部8像素+底部8像素）？

由于主体的高度为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;
}