渐变在全局 CSS 文件中不起作用 - 使用 Svelte [重复]

Question

我想为我的 Svelte 应用程序设置渐变背景。这是我喜欢这个网站的渐变：https://uigradients.com/#JShine。我复制了网站给出的十六进制代码并将它们放入我的全局 CSS 文件中，如下所示：

body {
  background: linear-gradient(#12c2e9,#c471ed,#f64f59);
  margin: 0;
  padding: 2rem;
}

我无法理解为什么渐变在中间有非常明显的颜色过渡。我希望它像 gradient 提到的名字一样贯穿始终。我不明白我做错了什么，我想要一个均匀的渐变而不是那么刺耳的线条。我附上了一张我的页面当前外观的图片。

注意：我的页面上确实有内容，但我不想在图像中包含我拥有的文本，因此我在页面上找到了没有内容可截图的空间。我也知道这更像是一个 CSS 问题，但我不确定它是否会有所不同，因为我实际上是在使用 Svelte 编写代码，所以我也添加了该标签。

What page currently looks like

Answer 1

您需要添加background-repeat、background-attachment和height，如下所示：

body {
  background: linear-gradient(#12c2e9,#c471ed,#f64f59);
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  margin: 0;
  padding: 2rem;
}