background-size: cover 要生效需满足三条件：容器有明确宽高；background-origin 和 background-clip 设为 border-box 避免 padding 干扰；background-position 保持 center center 确保居中裁剪。
用 background-size: cover 通常能解决背景图铺不满或拉伸变形的问题，但实际中常因容器尺寸、定位方式或图片比例不匹配而失效。关键不是加了 cover 就万事大吉，而是要确保它作用在正确的上下文里。
确保容器有明确宽高
background-size: cover 是按容器尺寸缩放图片的。如果容器本身没有设定宽高（比如 div 默认高度由内容撑开），背景图就可能只覆盖内容区域，看起来“没铺满”。
- 给容器设置固定宽高，例如：
width: 100%; height: 400px; - 或使用相对单位配合最小高度：
min-height: 100vh;让其至少占满视口 - 若容器是 flex 或 grid 子项，确认父容器未限制其尺寸，必要时加
flex: 1或min-height: 0
检查 background-origin 和 background-clip
默认情况下，背景绘制区域（background-origin）和裁剪区域（background-clip）都是 padding-box。如果容器有 padding 或 border，背景可能被“挡住”一部分，造成视觉上没铺满。
- 想让背景真正贴边铺满，可设：
background-origin: border-box; background-clip: border-box; - 更常用的是统一设为
content-box或直接用border-box避免 padding 干扰
注意 background-position 的影响
cover 会等比缩放并居中裁剪，但若 background-position 偏离中心（如设成 top left），可能导致关键内容被切掉，误以为“没铺满”。
立即学习“前端免费学习笔记（深入）”；
- 保持默认值
center center最稳妥 - 如需微调，用数值如
background-position: 20% 30%;，但需配合实际设计意图测试
响应式场景下补充 viewport 适配
在移动端，有时图片在横屏/竖屏切换时无法重绘，或初始渲染时尺寸判断不准。
- 加上
background-repeat: no-repeat;防止平铺干扰 - 用媒体查询针对小屏调整
background-size，例如竖屏时改用contain保全完整图像 - 必要时用 JS 监听
resize事件强制重绘（较少见，多数情况 CSS 可解决）
不复杂但容易忽略。核心就是三点：容器尺寸可控、背景绘制区域清晰、缩放锚点合理。把这三块理顺，cover 就能稳稳铺满。
