使用线性渐变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.jb51.cc/css/217696.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。