如何在Hugo的JuiceBar主题中用CSS添加背景且不破坏页面

使用Hugo的JuiceBar主题搭建网站，尝试通过自定义_background.scss、修改baseof.html并引入样式来添加蓝灰色渐变背景，但目前背景显示为灰白，且添加<body class="background-container">后页面博客区域被遮挡。

相关代码 #

_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>

_variables.scss相关变量 #

$tertiary2: #313131;
$tertiary3hover: #099dd7;

已在styles.scss中添加@import "background";。

1. 修复渐变背景不显示问题 #

你的渐变设置中两个颜色的终止百分比均为100%，这会导致渐变无法生效，只会渲染最后一个颜色。调整渐变参数即可：

background: linear-gradient(
  90deg,
  var($tertiary3hover) 0%,
  var($tertiary2) 100%
);

2. 解决内容被遮挡问题 #

• 不要直接给<body>绑定background-container类，fixed定位的元素会覆盖内容。在<body>内部新增独立的背景容器，放在内容最底层：
  修改baseof.html：

<body>
    <div class="background-container"></div>
    {{- partial "header.html" . -}}
    <main>
    {{- block "main" . }}{{- end }}
    </main>
    {{- partial "footer.html" . -}}
</body>

• 给背景容器添加层级控制，确保它在内容下方：
  更新_background.scss：

@import "_variables";

.background-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(
    90deg,
    var($tertiary3hover) 0%,
    var($tertiary2) 100%
  );
  clip-path: ellipse(148% 70% at 91% -14%);
  z-index: -1; /* 将背景置于内容下方 */
}

3. 消除主题默认背景冲突 #

检查JuiceBar主题的默认样式，若<body>或<main>设置了白色背景，需要将其改为透明：

body, main {
  background-color: transparent;
}

内容的提问来源于stack exchange，提问作者ergerthgre