渐变在全局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;
}