根本原因是容器高度为0，因div、html、body默认不占满视口；须设html,body{height:100%;margin:0;padding:0;}，目标容器用min-height:100vh，并确保父容器提供可计算高度。
background-size: cover 为什么没填满容器
根本原因不是 CSS 写错了，而是容器高度为 0 —— div 默认不占高度，html 和 body 也默认不占满视口。哪怕写了 background-size: cover，浏览器也没地方可“盖”。
实操建议：
- 必须显式设置
html, body { height: 100%; margin: 0; padding: 0; }，否则100vh在某些嵌套下会失效 - 目标容器（比如
.hero）用min-height: 100vh，不用height: 100vh，避免内容超出时被截断 - 如果容器是 Flex 或 Grid 子项，父容器得给它可计算的高度空间，子项还得加
height: 100%才能继承 - 用浏览器 DevTools 查看该元素的
computed height，如果是0px，就说明尺寸没撑起来
Bootstrap 5 中怎么写 bg-cover 类
Bootstrap 5 官方没有 bg-cover 这类 utility class，bg-* 系列只支持纯色背景。想用 cover，得自己写 CSS。
推荐做法：
- 定义一个自用 class：
.bg-cover { background-size: cover; background-position: center center; background-repeat: no-repeat; } - 路径要写对，比如
background-image: url('./images/hero-bg.jpg');，相对路径以 CSS 文件位置为基准 - 别把背景图直接加在
.row或.col上——它们自带负 margin 和 padding，会导致图片错位或留白 - 改用独立容器：
<div class="hero-section bg-cover"></div>，再手动设min-height: 100vh
cover 和 100% 100% 的关键区别在哪
很多人搜“覆盖”却误用了 background-size: 100% 100%，结果图被拉伸变形。这不是 bug，是行为差异。
cover：
- 等比缩放图片，直到**短边刚好填满容器对应方向**，长边溢出被裁剪
- 适合 Banner、登录页，强调视觉满幅感，允许裁边缘
- 必须配
background-position控制裁哪一块，比如center top保人脸
100% 100%：
- 强制拉伸图片宽高分别填满容器宽高，完全不管原始比例
- 仅适用于抽象纹理、渐变底图等不怕形变的内容
- 若原图是人像或带文字的海报，拉伸后必然失真
移动端和 Safari 下容易忽略的坑
在 iOS Safari（尤其微信内置浏览器）上，cover 表现常和桌面端不一致，不是 CSS 写错了，而是渲染机制不同。
常见问题与对策：
-
100vh在 Safari 中受地址栏显示/隐藏影响，高度跳变 → 改用min-height: 100dvh（更稳定） - 老版 Safari（iOS 9 及以下）对
background-attachment: fixed+cover组合支持差 → 移动端统一设background-attachment: scroll - 设计师给的图宽高比和页面容器不匹配 → 光调 CSS 没用，得提前沟通或换图；否则关键内容（如人脸）总在裁剪区
- 大图加载慢拖首屏 → CSS 背景图不支持
srcset，可用image-set()（Chrome/Safari 新版本）或 JS 动态切类名
最麻烦的其实是：你调好了桌面端，一测 iPhone 就发现人物头顶没了——这时候别急着改 CSS，先检查 background-position 是否该从 center center 改成 center top，再看是否真需要换图。
