css - 尽管滚动时“不重复”，但渐变背景仍会重复

Question

我已经尝试在这里搜索答案，但对于其他问题的建议没有一个对我有用。

我的背景代码是：

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%。我什至尝试过宽度，但也没有用。

当我运行它时，它在我的浏览器中显示如下： 一旦我向下滚动，它就会重复。

有什么对你们有用的吗？

Answer 1

我在课堂上向老师寻求帮助，他们指出我将背景附件设置为固定，这很有效！现在背景延伸到整个页面并且不再重复。

body {
background-attachment: fixed;
}

谢谢大家的回答！

Answer 2

您可以使用下面提到的代码

body {
background-image: linear-gradient(to bottom left, #ffe03d, #ff00e6);
background-size:100% 100vh;
color: #f4f4f4;
text-align: center;
}

所以它可以根据需要工作

Answer 3

只需为 html 和 body 标签添加height一个100%。你可以走了。

html, body {
  height: 100%;
}