默认情况下，html 的 `
` 元素自带浏览器预设的 margin 和 padding，这会导致即使设置了 `height: 100%` 和 `background-size: cover`，背景图仍会在页面四周留下细微间隙；只需重置 body 的外边距和内边距即可彻底消除。在 Web 开发中，实现全屏背景图（即背景图像严格贴合浏览器视口边缘、无任何白边或缝隙）是一个常见需求，但往往因忽略浏览器默认样式而失败。你提供的 CSS 类 .fixed-bg 本身逻辑正确：使用 background-size: cover 确保图像等比缩放并填满容器，background-attachment: fixed 实现视差效果，min-height: 500px 提供基础高度兜底——但问题根源不在该类，而在其父容器。
关键原因：所有现代浏览器（Chrome、Firefox、Safari 等）默认为 <body> 元素设置 margin: 8px（典型值，可能因 UA 样式略有差异），部分还附加 padding: 0 或其他默认间距。这意味着即使 .fixed-bg 高度设为 100%，它实际只占 body 内容区的 100%，而 body 自身的 margin 会在最外层“撑开”空白区域，导致背景图无法真正抵达视口边缘。
✅ 解决方案：显式重置 <body> 的默认盒模型属性：
body {
margin: 0;
padding: 0;
/* 可选：确保 body 占满整个视口高度 */
min-height: 100vh;
}同时建议优化你的 .fixed-bg 类，使其更健壮：
.fixed-bg {
/* 使用 vh 单位替代 height: 100%（更可靠）*/
min-height: 100vh;
/* 移除 left/top/-10px 等手动偏移 —— 它们不仅无效，还可能引发水平滚动条 */
background-image: url("space.png");
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
/* 确保无内边距干扰 */
margin: 0;
padding: 0;
}⚠️ 注意事项：
- 不要依赖 height: 100%，除非父元素（如 html, body）已明确设为 height: 100% 或 min-height: 100vh；
- 避免使用负 left/top 值强行“拉伸”，这易导致布局错乱或触发不必要的横向滚动；
- 若使用 Flask 框架，请将上述 CSS 放入静态 CSS 文件并正确引用，或置于 <style> 标签中（确保加载顺序优先于其他样式）；
- 在移动端需额外添加 viewport meta 标签以保证响应一致性：
<meta name="viewport" content="width=device-width, initial-scale=1">
完成以上调整后，背景图将真正实现“零间隙”全屏覆盖，无论桌面还是移动设备均能稳定生效。
