要让网页背景在大屏幕下不出现空白边缘，需清除 html 和 body 默认 margin 与 height 陷阱，设 margin: 0; padding: 0; height: 100%; 并用 min-height: 100vh 替代 height: 100% 更可靠；背景图须配 background-size: cover、background-position: center、background-repeat: no-repeat、background-attachment: scroll。
要让网页背景在大屏幕下不出现空白边缘，核心不是调图片尺寸，而是切断浏览器默认样式对 body 和 html 的干扰，并用视口单位替代百分比高度依赖。
清除 body 和 html 的默认 margin 与 height 陷阱
几乎所有浏览器都会给 body 默认加 margin: 8px（视觉上常被误认为“5px 白边”），而 html 和 body 默认没有显式高度，导致 height: 100% 失效——它不是按屏幕算，而是按“父容器内容高度”算，结果就是背景只撑开到内容高度，大屏一拉就露白底。
必须显式重置：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
注意：height: 100% 在这里有效，是因为 html 的初始包含块（initial containing block）就是视口，只要它和 body 都设了 height: 100%，链式继承才成立。
用 min-height: 100vh 替代 height: 100% 更可靠
即使 html/body 高度设对了，如果页面内容很短，仅靠 height: 100% 的背景容器仍可能被压缩——尤其当它嵌套在 flex 或 grid 容器里时。此时 min-height: 100vh 是更稳的选择，它直接锚定视口高度，不依赖父级高度声明。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
100vh永远等于当前设备视口高度，不受内容或父容器影响 - 避免写
height: 100vh（强制截断内容），min-height才是安全兜底 - 若背景图用在某个
.hero区域而非全页，同样适用该规则
背景图属性必须配齐这四条
只清 margin、设高度还不够。背景图本身若没明确行为控制，大屏下依然会平铺、偏移或留空。
关键组合：
.bg-full {
min-height: 100vh;
background-image: url("bg.jpg");
background-size: cover; /* 必须：等比缩放填满 */
background-position: center; /* 必须：居中取景，避免裁切偏移 */
background-repeat: no-repeat; /* 必须：禁用平铺 */
background-attachment: scroll; /* 推荐：比 fixed 更兼容，尤其移动端 */
}
⚠️ 注意：background-attachment: fixed 在 iOS Safari 和部分安卓 WebView 中会导致背景卡顿、错位甚至消失，非必要不启用。
别让其他样式偷偷覆盖掉你写的规则
常见干扰源：
- 引入了 Bootstrap、Tailwind 等框架？它们的
body默认 margin 可能被重置，但某些版本会加padding或min-height，得查开发者工具的 Computed 样式面板确认最终值 - 写了
* { margin: 0; padding: 0; }？它虽清掉了大部分元素，但无法覆盖html和body的初始 margin，必须单独写 - 用了
box-sizing: border-box？建议加上，避免后续 padding/border 撑破容器宽度引发横向滚动条
真正起作用的永远是最后加载、选择器权重最高、且未被 !important 覆盖的那条规则——大屏留白问题，八成出在某处没被你看到的隐性 margin 或 height 计算断裂上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
