如何去除使用线性渐变属性时出现的条纹 [英] How to remove the stripes that appears when using linear gradient property
问题描述
当使用linear-gradient CSS属性时,当使用left和right作为方向值时,背景显示没有条纹.但是当方向值指定为顶部或底部时,背景中会出现条纹.有什么办法可以去除条纹吗?
When using linear-gradient CSS property, the background appears without stripes when using left and right as direction value. But when direction value is given as top or bottom, stripes appears in the background. Is there any way that we can remove the stripes?
代码如下:
body {
background: linear-gradient(to top, red, yellow);
}
推荐答案
您面临着一个复杂的背景传播,您可以阅读此处.我会尽量用简单的话来解释.
You are facing a complex background propagation that you can read about here. I will try to explain it with simple words.
你的 body
的高度等于 0;因此背景在它上面不可见,但默认情况下它有 8px
的边距,它在 html
元素上创建了 8px
的高度.
Your body
has a height equal to 0; thus the background won't be visible on it but by default it has 8px
of margin which create a height of 8px
on the html
element.
为什么不是 16px 的高度(顶部 8px + 底部 8px)?
由于 body 的高度为 0,我们面临着 margin collpasing 并且两个边距都将折叠成一个,我们的高度为 8px.
Since the height of body is 0 we are facing a margin collpasing and both margin will collapse into only one and we have a height of 8px.
然后我们有一个从 body
到 html
的背景传播,linear-gradient
将覆盖 8px高度.
Then we have a background propagation from body
to html
and the linear-gradient
will cover the 8px height.
最后,html 的背景传播到 canvas 元素以覆盖整个区域,这解释了为什么线性渐变重复每个 8px
.
Finally, the background of the html is propagated to the canvas element in order to cover the whole area which explain why the linear gradient is repeating each 8px
.
body {
background: linear-gradient(to top, red, yellow);
}
使用左或右方向时也会重复,但你不会在视觉上看到它这是合乎逻辑的,因为它是相同的模式:
It's also repeated when using left or right direction but you won't see it visually which is logical since it's the same pattern:
body {
background: linear-gradient(to right, red, yellow);
}
你也可以删除重复,你会看到它只覆盖了 8px
You can also remove the repeating and you will see it's covering only 8px
body {
background: linear-gradient(to right, red, yellow) no-repeat;
}
为了避免这种行为,您可以简单地将 height:100%
(或 min-height:100%
)设置为 html
In order to avoid this behavior you can simply set height:100%
(or min-height:100%
) to the html
html {
height: 100%;
}
body {
background: linear-gradient(to top, red, yellow);
}
它也适用于 no-repeat
因为默认情况下 linear-gradient
将覆盖整个:
It will also work with no-repeat
since by default a linear-gradient
will cover the whole are:
html {
min-height: 100%;
}
body {
background: linear-gradient(to top, red, yellow) no-repeat;
}
这篇关于如何去除使用线性渐变属性时出现的条纹的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!