根本原因是容器高度为0，需同时设置html{height:100%}、body{min-height:100vh;margin:0;padding:0}及background-size:cover、background-position:center center、background-repeat:no-repeat。
背景图只显示左上角一小块，或被拉伸变形，根本不是图片或路径问题，而是容器高度为 0 ——html 和 body 默认不占满视口，div 也默认按内容撑高。
为什么 background-size: cover 没生效
浏览器看到的是一个高度为 0 的容器，cover 失去缩放基准，退化为原始尺寸渲染。常见现象包括：图片只露出左上角、横向拉伸、上下留白、甚至完全不可见。
-
html和body必须显式设height: 100%，否则100vh在嵌套场景下也可能计算异常 - 目标容器（如
.hero）必须用min-height: 100vh，不用height: 100vh—— 否则内容超出时底部被截断 -
background-position: center center缺失会导致裁剪中心偏移，人脸/Logo 直接被切掉 - Bootstrap 的
.container或.row自带padding和负margin，会压缩实际渲染区域，“全屏”变“缩进”
怎么写 CSS 才真正撑满视口
别依赖百分比继承，直接用视口单位 + 显式控制行为：
- 给目标容器加：
min-height: 100vh（现代可叠加height: 100dvh，但必须带min-height: 100vh降级） - CSS 背景声明必须完整：
background-image: url("bg.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; - 路径必须带引号：
url("bg.jpg")，漏引号会导致整条background声明静默失效 - 避免内联 style 写复合属性：
style="background: url() no-repeat cover"容易因顺序错或缺值导致cover被重置为auto
Bootstrap 栅格里加背景图总留白怎么办
不是图片小，也不是路径错，是 .container-fluid 默认有左右 padding，.row 有负 margin，两者叠加后背景图边缘被“吃掉”。
- 推荐绕开栅格：全屏区域直接用
<div class="hero-bg">，不套 <code>.container或.row - 非得嵌套时，在父容器加
mx-n3 px-0（抵消.row的-1remmargin 和.container-fluid的 padding） - 别给
.col加h-100—— 它依赖父元素高度，而.row默认是auto高度，无效 - Bootstrap 5 的
vh-100类可用，但必须配合p-0 m-0，否则留白照旧 - 绝对不要用
background-attachment: fixed—— iOS Safari 支持差，滚动卡顿、错位、重绘丢失都常见 - 用
min-height: 100vh替代height: 100vh，缓解地址栏跳变影响 - 图片加载失败时必设 fallback：
background-color: #222，否则网络慢或 404 时页面只剩空白底色 - 真机调试务必打开 DevTools Network 面板，确认
bg.jpg是否返回 404 或 CORS 错误
移动端 Safari 和缩放下的隐形坑
iOS Safari 地址栏收起/弹出会改变 100vh 计算值，导致背景短暂裁顶或留白；浏览器缩放也会让 vh 失准。
最常被忽略的其实是「容器有没有高度」和「祖先元素有没有 overflow: hidden」——后者会把超出部分直接裁掉，看起来像图被切了，其实只是被父级藏起来了。
