HTML背景重复问题求助：设置100vh仍出现双重背景

问题描述 #

页面添加高度为900px的aboutme组件后，body的径向渐变背景出现无故重复，呈现双重背景效果（效果如图：）。已为body设置height: 100vh和min-height: 100vh，相关代码如下：

CSS代码 #

body {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  height: 100vh;
  min-height: 100vh;
  color-scheme: light dark;
  background-image: radial-gradient(at center, #0d1d31 0%, #0c0d13 100%);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

HTML代码 #

<div class="group">
  <div class="animated-background"></div>
  <div class="animated-background-solid"></div>
  <div class="size-slot-container">
    <div class="slot-container">
      <div class="intro">
        <p class="greeting">Hey 👋</p>
        <h1 class="name">I'm MisTrale 🦅</h1>
        <h2 class="role">FullStack Developer <span style="color: red;">Engineer</span></h2>
        <p class="description">I want to be a <span style="color: red;"> Full-Stack </span> Developer specializing in <span style="color: blue;">front-end</span>, <span style="color: blue;">back-end</span>, and <span style="color: blue;"> mobile </span> development using Flutter. I am passionate about creating seamless and efficient applications that provide real value. Actively seeking opportunities to leverage my skills in meaningful projects and contribute to the growth of the tech industry.</p>
      </div>
    </div>
  </div>
</div>
<div class="aboutme"></div>
<style>.aboutme {height: 900px;}</style>

问题原因 #

核心问题是body的高度被固定为100vh，但页面实际内容高度超过了100vh（aboutme组件占900px，加上上方intro内容，总高度大概率超过视口高度）。此时body的高度仅为视口高度，超出部分会由html元素填充，而html元素默认继承body的背景样式，且默认背景重复规则为repeat，导致超出视口的区域显示重复背景，形成“双重背景”效果。

解决方案 #

方案1：将背景样式移至html元素并锁定覆盖范围 #

直接把背景样式放到html元素上，确保背景覆盖整个页面且不重复：

html {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  min-height: 100vh;
  color-scheme: light dark;
  background-image: radial-gradient(at center, #0d1d31 0%, #0c0d13 100%);
  background-repeat: no-repeat;
  background-size: cover;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0; /* 清除默认margin避免空白或滚动条异常 */
  min-height: 100vh;
}

方案2：调整body高度属性并添加背景固定规则 #

保留body的背景样式，移除固定高度，让body随内容自适应，同时锁定背景不重复且固定：

body {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  min-height: 100vh; /* 仅保留min-height，让高度随内容延伸 */
  margin: 0;
  color-scheme: light dark;
  background-image: radial-gradient(at center, #0d1d31 0%, #0c0d13 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

方案3：使用background简写属性整合设置 #

更简洁的写法，用background属性一次性整合所有背景规则：

body {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  min-height: 100vh;
  margin: 0;
  color-scheme: light dark;
  background: radial-gradient(at center, #0d1d31 0%, #0c0d13 100%) fixed no-repeat;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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