主要讨论请参见此处：https://discourse.gohugo.io/t/how-do-i-add-a-wallpaper-to-my-site-page-cannot-figure-it-out/ 49084/1
我被告知要在这里问。我在我的 Hugo 制作的网站上使用 JuiceBar 主题。我使用的主题让这变得很棘手。我的 _background.scss 代码是：
@import "_variables";
.background-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: linear-gradient(
90deg,
var($tertiary3hover) 100%,
var($tertiary2) 100%
);
clip-path: ellipse(148% 70% at 91% -14%);
}
我的baseof.html代码是：
<body class="background-container">
{{- partial "header.html" . -}}
<main>
{{- block "main" . }}{{- end }}
</main>
{{- partial "footer.html" . -}}
</body>
我的 bodyof.html _variables.scss 导入是：
$tertiary2: #313131;
$tertiary3hover: #099dd7;
然后我添加了
@import "background";
到我的 styles.scss 文件。
这一切都是半成品。例如，目前的情况是这样的： https://i.imgur.com/RYAr56x.png
我想要蓝色/灰色，但我的结果是灰色/白色，即使我的变量和诸如此类的东西是蓝色和灰色的。我也尝试过弄乱“0%”和“100%”部分。
但这就是整个大问题： 与
<body class="background-container">
添加到我的 baseof.html 文件中，它会擦除整个网站/页面的下半部分。这是没有添加代码的情况下的样子（正常）：https://i.imgur.com/IeHhiss.png
添加代码后，它会清除整个博客文章部分。如何在不破坏网站的情况下实现我想要的蓝/灰色背景设计？
此时我已经尝试了几乎所有方法。我被困住了。
这最好通过以下方式完成：
将正文的背景颜色设置为您想要的下半部分 成为。
设置元素的背景颜色并为其指定剪辑路径。
这将确保您始终拥有美好的分离。
html {
height: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
min-height: 100%;
background: #313131;
}
.bg {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: #099dd7;
clip-path: ellipse(148% 70% at 91% -14%);
}<body><div class="bg"></div></body>