Vuetify项目中移动渐变背景遮挡页面内容的问题求助

我尝试实现一个带有移动背景的div，但核心问题是这个移动背景会覆盖页面上的其他内容（比如底部本该一直显示的footer）。

App.vue代码 #

<!-- App.vue -->
<v-app>
  <v-main>
    <MainContent /> <!-- 包含移动背景 -->
    <div style="height: 80px" class="bg-primary w-100"></div> <!-- 需要一直可见的footer -->
  </v-main>
</v-app>

MainContent.vue代码 #

<template>
  <div class="background-gradient"></div>
  <div class="h-screen">
    <v-container class="fill-height position-relative">
      <div style="height: 500px" class="bg-black w-100"></div>
    </v-container>
  </div>
<!-- 此处存在标签闭合错误，应为</template> -->
<template>

<style>
.background-gradient {
  background-image: linear-gradient(136deg, #e5ccab 0%, #e5ccab 1.26%, #e0cbad 19.87%, #d4c8b5 39.24%, #bfc3c2 58.96%, #a2bdd5 78.81%, #8ab8e5 92.48%, #8ab8e5 93.59%);
  position: fixed;
  width: 162vw;
  height: 162vh;
  /* z-index: -1; */
  animation: moveBackground 6s ease-in-out infinite alternate;
}

@keyframes moveBackground {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-38%, -38%);
  }
}
</style>

当前效果 #

问题原因及修复方案 #

1. 层级问题：固定定位元素的默认层级高于普通文档流元素，你注释掉了z-index: -1;，导致背景div覆盖了footer和其他内容。只需取消这个注释，让背景的层级低于其他元素即可。
2. 标签错误：MainContent.vue的template标签未正确闭合，最后一行的<template>应改为</template>，否则会引发渲染异常。

修正后的MainContent.vue代码 #

<template>
  <div class="background-gradient"></div>
  <div class="h-screen">
    <v-container class="fill-height position-relative">
      <div style="height: 500px" class="bg-black w-100"></div>
    </v-container>
  </div>
</template>

<style>
.background-gradient {
  background-image: linear-gradient(136deg, #e5ccab 0%, #e5ccab 1.26%, #e0cbad 19.87%, #d4c8b5 39.24%, #bfc3c2 58.96%, #a2bdd5 78.81%, #8ab8e5 92.48%, #8ab8e5 93.59%);
  position: fixed;
  width: 162vw;
  height: 162vh;
  z-index: -1; /* 启用该属性，将背景置于底层 */
  animation: moveBackground 6s ease-in-out infinite alternate;
}

@keyframes moveBackground {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-38%, -38%);
  }
}
</style>

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