要实现全屏背景，必须给目标元素设 min-height: 100vh 并配齐 background-image、background-size: cover、background-position: center center、background-repeat: no-repeat，且避免 Bootstrap 默认样式和内联写法错误干扰。
直接给 body 或容器加 background-size: cover 不会自动全屏——它只缩放图片，不撑开容器。必须同步处理高度、边距和定位。
为什么 Bootstrap 项目里 background-size: cover 没铺满
Bootstrap 默认不重置 html 和 body 的高度，而 background-size 是作用于当前元素内容区的。如果 body 高度只有内容那么高（比如只有 200px），哪怕写了 cover，背景也只覆盖那 200px 区域。
常见表现：
- 页面顶部有背景图，但往下滚动就变白（
body高度不足） - 在 Chrome 看正常，Safari 里底部留白（
vh在 iOS 上有跳动或计算偏差） - 用了
container或row包裹背景 div，结果被 Bootstrap 的 padding/margin 干扰
在 Bootstrap 中设置全屏背景的最小可靠写法
绕过 Bootstrap 默认样式干扰，用明确、独立的规则覆盖：
立即学习“前端免费学习笔记（深入）”；
- 给目标元素（推荐用单独
<div class="hero-bg">，别直接怼 <code>body）设min-height: 100vh——比height: 100vh更安全，防内容超长时被截断 - 显式写全背景四件套：
background-image、background-size: cover、background-position: center center、background-repeat: no-repeat - 确保该元素是块级且无浮动/弹性干扰：如果父容器是 Bootstrap 的
container，记得加position: relative或移除其max-width限制（必要时用container-fluid） - 路径必须带引号：
url("bg.jpg")，漏引号或路径错会导致整条 background 声明失效 -
background-size: 100% 100%是强制拉伸，图片严重变形；cover是等比缩放后裁剪，保持构图比例 -
contain会在四周留白，不适合“全屏”场景，但适合需要完整展示 logo 或图表的后台页头部 - 移动端小屏下，
cover可能把关键文字/按钮裁掉——得配合background-position: top center或媒体查询微调 - 必须配对
background-image，否则没图可缩放 - 不能用复合属性
background一并写（如background: url(...) no-repeat cover），顺序错或缺值会让cover被重置为auto - 正确内联写法：
style="background-image: url('bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; min-height: 100vh;" - Bootstrap 的 utility class（如
bg-dark）会覆盖自定义 background，要加!important或改用自定义 class
background-size: cover 和 100% 100% 在 Bootstrap 里千万别混用
Bootstrap 组件常依赖宽高比（如 card-img-top），用错缩放方式会破坏布局一致性：
内联 style 里写 background-size: cover 为什么没反应
内联样式里 background-size 单独写基本等于没写，浏览器会忽略：
真正容易被忽略的是：背景图是否在首屏加载完成前就触发了渲染。如果图片大、网络慢，min-height: 100vh 容器会先以纯色或空白撑开，等图加载完才“闪现”——这不是 cover 的问题，是资源加载时机问题，得靠 loading 状态或骨架屏兜底。
