This question already has answers here:
Why does styling the background of the body element affect the entire screen?
(7个答案)
2年前关闭。
当使用线性渐变CSS属性时,使用左和右作为方向值时背景显示为无条纹。但是,当方向值指定为顶部或底部时,背景中会出现条纹。有什么办法可以消除条纹?
这是代码:
当使用左或右方向时也会重复此操作,但是由于它是相同的模式,因此您不会在视觉上看到它是合乎逻辑的:
您也可以删除重复的内容,您会看到它仅覆盖
为了避免这种行为,您可以简单地将
它也可以与
(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;
}
关于css - 如何消除使用线性渐变属性时出现的条纹,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58093010/
10-11 13:15