渐变在全局 CSS 文件中不起作用 - 使用 Svelte
Gradient Not Working in Global CSS File - Using Svelte
我想为我的 Svelte 应用程序设置渐变背景。这是我喜欢这个网站的渐变:https://uigradients.com/#JShine。我复制了网站给出的十六进制代码并将它们放入我的全局 CSS 文件中,如下所示:
body {
background: linear-gradient(#12c2e9,#c471ed,#f64f59);
margin: 0;
padding: 2rem;
}
我无法理解为什么渐变在中间有非常明显的颜色过渡。我希望它像名字 gradient 提到的那样均匀。我不明白我做错了什么,我想要一个均匀的渐变而不是那么刺耳的线条。我附上了我的页面目前的样子的图片。
注意:我的页面上确实有内容,但我不想在图片中包含文字,所以我发现 space 在我的页面上没有内容截屏。我也知道这更像是一个 CSS 问题,但我不确定它是否有所作为,因为我实际上是在使用 Svelte 编写代码,所以我也添加了该标签。
What page currently looks like
您需要添加 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;
}
我想为我的 Svelte 应用程序设置渐变背景。这是我喜欢这个网站的渐变:https://uigradients.com/#JShine。我复制了网站给出的十六进制代码并将它们放入我的全局 CSS 文件中,如下所示:
body {
background: linear-gradient(#12c2e9,#c471ed,#f64f59);
margin: 0;
padding: 2rem;
}
我无法理解为什么渐变在中间有非常明显的颜色过渡。我希望它像名字 gradient 提到的那样均匀。我不明白我做错了什么,我想要一个均匀的渐变而不是那么刺耳的线条。我附上了我的页面目前的样子的图片。
注意:我的页面上确实有内容,但我不想在图片中包含文字,所以我发现 space 在我的页面上没有内容截屏。我也知道这更像是一个 CSS 问题,但我不确定它是否有所作为,因为我实际上是在使用 Svelte 编写代码,所以我也添加了该标签。
What page currently looks like
您需要添加 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;
}