CSS渐变重复

Question

我刚刚完成了一个构建电子商务网站的 Django 教程，所以我对 HTML 和 CSS 还很陌生，但我已经使用 Python 有一段时间了，所以这不是问题。所以我决定在网站上使用随机的背景颜色。我可以用一些 JavaScript（编辑 CSS 值）很容易地做到这一点，但这看起来很糟糕。所以我决定用 CSS 渐变做一个随机背景，因为这看起来很酷，我想要在我的网站上使用随机颜色样式。这里是文章：https://www.w3schools.com/css/css3_gradients.asp

我在 HTML 文件顶部和末尾的面板之后有一个 body 标记。

这是我的 CSS：

body{
    background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(255,0,0,1));
}

这是网站的图片：https://i.stack.imgur.com/762Mb.png

由于某种原因，它会自我复制/重复，我自己无法弄清楚。我尝试制作一个 DIV 并将其指定为 class: grad1 并将其从 CSS 文件中的 body 标记复制过来，但这只是做同样的事情。 在此先感谢:)

Answer 1

您需要添加background-repeat: no-repeat 以阻止背景重复。

body {
  background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(255,0,0,1));
  background-repeat: no-repeat;
  height: 100vh; /* Added to display the gradient better */
}