background-size: cover未填满容器的根本原因是容器无有效高度；需检查父容器尺寸、显示模式及Flex/Grid布局空间，cover裁切覆盖，contain等比完整显示，配合background-position微调并注意兼容性与性能。
background-size: cover 为什么没填满容器
常见现象是图片只铺了左上角，或者留白、拉伸变形。根本原因不是 cover 失效，而是容器本身没尺寸——background-size 再准，也填不满一个高度为 0px 的 div。
实操建议：
- 检查父容器是否设置了明确高度（比如
height: 300px），或有内容撑开；用min-height比height更稳妥 - 确认元素不是
display: inline或未清除浮动导致高度塌陷 - 如果容器是 Flex 或 Grid 子项，需确保父容器给了它可计算的尺寸空间，否则
cover会按“收缩后尺寸”计算而非视觉预期
cover 和 contain 的关键区别在哪
cover 是“等比缩放并裁切”，目标是完全覆盖容器，哪怕切掉边缘；contain 是“等比缩放并完整显示”，目标是全部内容可见，哪怕四周留白。
使用场景：
立即学习“前端免费学习笔记（深入）”；
- 全屏 Banner、登录页背景图 → 用
cover，允许裁剪，强调视觉满幅感 - 卡片内产品图、头像预览 → 用
contain，保内容完整性 - 注意：两者都依赖图片原始宽高比，换图后表现可能突变，别只靠 CSS 硬扛
background-size: cover 配合 background-position 常见踩坑
默认 background-position: 50% 50%（居中），但很多人想“让某个人物的脸不被裁掉”，就随手改 top 或 left，结果在不同屏幕下失效。
实操建议：
- 优先用
background-position: center top这类语义值，比像素值更鲁棒 - 若必须精调，配合
background-attachment: scroll（默认值），避免固定定位干扰 - 移动端小屏下
cover裁剪更狠，建议加媒体查询微调background-position，例如@media (max-width: 480px) { ... background-position: center 20%; }
兼容性和性能要注意什么
background-size 在 IE9+ 支持 cover，IE8 及以下直接忽略，降级为平铺或不显示背景图——这点常被忽略，尤其企业内网还跑着 IE11 兼容模式。
性能方面：
- 大图配
cover不会自动压缩分辨率，浏览器仍加载原图，可能拖慢首屏 - 建议搭配
srcset或响应式图片方案，但注意：CSS 背景图不支持srcset，得用image-set()（仅 Safari/Chrome 较新版本）或 JS 动态切换类名 - 动画中频繁修改
background-size或background-position会触发重绘，卡顿明显，不如用transform: scale()+overflow: hidden模拟
最麻烦的其实是设计师给的图宽高比和页面容器不匹配——这时候光调 CSS 没用，得提前沟通或写 JS 动态算出最优缩放比再设 background-size，不然永远在修边。
