CSS如何优雅地实现背景图全屏铺满 利用background-size:cover
作者：袖梨
2026-07-18
background-size: cover未铺满主因是父容器高度不足；需设min-height: 100vh、html/body height: 100%及margin: 0，Flex中防align-items干扰，配合background-position精准控裁剪。
background-size: cover 为什么有时没铺满？
直接写 background-size: cover 却发现背景图只占视口一半、边缘留白，大概率是父容器没撑开——cover 只负责缩放图片适配容器，不负责定义容器尺寸。常见于 <body> 或 <div> 没设高，或被其他 CSS（比如浮动、flex 未设 align-items）干扰。
必须确保目标元素高度至少为视口高度：
- 给根容器加
min-height: 100vh（不是height: 100vh，避免内容超长时被截断） - 若用在
<body>，记得同时设html, body { height: 100%; margin: 0; }，否则100%无参照 - Flex 容器里要确认子项没被
align-items: flex-start拉偏，建议显式写align-items: stretch
cover 和 contain 的关键区别在哪？
cover 是「等比缩放，填满容器，可能裁剪」；contain 是「等比缩放，完整显示，可能留白」。选错会直接导致预期外的留白或裁切。
典型误用场景：
立即学习“前端免费学习笔记（深入）”；
- 做全屏 Banner 图，用了
contain→ 图片居中但上下/左右留白 - 做登录页背景，用了
cover但关键人物脸被裁掉 → 缺少background-position微调 - 响应式页面中，小屏下
cover把 logo 文字切掉 → 需配合媒体查询换background-position或改用object-fit+<img>
如何让 cover 不乱裁关键内容？
background-size: cover 默认以 center center 为锚点缩放，但图片构图中心未必是你想保留的部分。必须手动控制裁剪起点：
- 用
background-position: top center保头上方内容（适合人像上半身） - 用
background-position: bottom 20%把焦点往下压（适合带标题栏的图） - 数值单位支持
%、px、left/center/right、top/center/bottom组合，如background-position: 30% 70% - 慎用
background-attachment: fixed：滚动时可能造成视觉错位，且在 iOS Safari 上有性能问题
移动端真机测试容易忽略的坑
iOS Safari 对 vh 单位处理特殊：地址栏收起/展开时，100vh 会动态变化，导致背景图突然跳动。这不是 cover 的问题，而是高度基准不稳定。
稳妥解法：
- 用 JavaScript 动态设高度：
el.style.height = window.innerHeight + 'px'，并监听resize（注意防抖） - 改用
background-size: 100% 100%+background-repeat: no-repeat强制拉伸（牺牲清晰度，适合纯色渐变图） - 更现代的方案：用
aspect-ratio配合object-fit: cover替代背景图，把图当<img>处理，可控性更高
真正麻烦的从来不是 cover 本身，而是你没意识到它依赖的容器高度、图片构图、以及不同浏览器对视口单位的解释差异。
