如何去除使用线性渐变属性时出现的条纹 [英] 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屋！