[英]Gradient background repeats despite having “no-repeat” when I scroll
我已经尝试在这里搜索答案,但对于其他问题的建议没有一个对我有用。
我的背景代码是:
body {
background-image: linear-gradient(to bottom left, #ffe03d, #ff00e6);
background-repeat: no-repeat scroll;
background-size: cover;
color: #f4f4f4;
text-align: center;
}
我还将 HTML 的高度设置为 100%。 我什至尝试过宽度,但也没有用。
当我运行它时,它在我的浏览器中显示如下:一旦我向下滚动,它就会重复。
有什么对你们有用的吗?
您可以使用下面提到的代码
body {
background-image: linear-gradient(to bottom left, #ffe03d, #ff00e6);
background-size:100% 100vh;
color: #f4f4f4;
text-align: center;
}
所以它可以根据需要工作
只需为 html 和正文标签添加100%
的height
。 你对 go 很好。
html, body {
height: 100%;
}
我在我的 class 期间向我的老师寻求帮助,他们指出我将背景附件设置为固定并且有效。 现在背景延伸到整个页面并且不再重复。
body {
background-attachment: fixed;
}
谢谢大家的回答!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.