默认情况下，html 的 `

你遇到的问题非常典型：尽管 .fixed-bg 类已设置 margin: 0; padding: 0; height: 100%; 并使用 background-size: cover，但页面四周仍残留细小间隙（约 5px）。根本原因并非你的 CSS 类有误，而是浏览器对 元素施加了默认样式——几乎所有主流浏览器（Chrome、Firefox、Safari 等）都会为 body 设置 margin: 8px（或类似值），这会直接在视口边缘撑开空白区域，使子元素无法真正“贴边”。

✅ 正确解决方案：全局重置 body 样式
只需在 CSS 文件顶部（或

body {
  margin: 0;
  padding: 0;
  /* 可选：确保 body 占满视口高度 */
  min-height: 100vh;
}

⚠️ 注意事项：

• min-height: 100vh 很重要：仅设 height: 100% 不够，因为百分比高度依赖父容器高度；而 vh（viewport height）单位直接基于视口，能确保 body 至少撑满一屏，避免内容短时背景被截断。
• 若你使用 Flask 框架，请将上述 CSS 放入静态 CSS 文件（如 static/style.css）并正确引入模板，或内联于 中。
• 避免仅依赖 html { margin: 0; } —— html 元素本身通常无默认 margin，真正“作祟”的是 body。

? 补充建议（提升健壮性）：
为彻底规避浏览器默认样式差异，推荐在项目开头加入轻量级 CSS 重置（无需完整 Normalize.css）：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
}

这样不仅修复了背景间隙，还统一了盒模型行为，让后续布局更可控。

总结：不是你的 .fixed-bg 写错了，而是漏掉了对 body 的基础样式归零。加上 body { margin: 0; padding: 0; min-height: 100vh; }，即可实现真正的全屏无隙背景覆盖。