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。



然后我们有一个从bodyhtml的背景传播,并且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;
}

关于css - 如何消除使用线性渐变属性时出现的条纹,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58093010/

10-11 13:15