如何删除使用线性渐变属性时出现的条纹 [英] How to remove the stripes that appears when using linear gradient property

问题描述

使用线性渐变CSS属性时，使用左和右作为方向值时背景显示为无条纹.但是，当方向值指定为顶部或底部时，背景中会出现条纹.有什么办法可以消除条纹?

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.

为什么高度不为16像素(顶部为8像素，底部为8像素)?

由于主体的高度为0，因此我们面临的是边距折叠，并且两个边距都将折叠成一个，并且高度为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屋！