css – 如何删除使用线性渐变属性时出现的条纹

前端之家收集整理的这篇文章主要介绍了css – 如何删除使用线性渐变属性时出现的条纹前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用线性渐变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);
}
原文链接:https://www.f2er.com/css/217696.html

猜你在找的CSS相关文章