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