background-size: cover 未生效最常见原因是容器无明确宽高；需检查容器是否设置width/height，Flex/Grid子项需显式设height:100%，且cover裁剪区域受background-position控制。
background-size: cover 为什么没生效
最常见原因是容器本身没尺寸——background-size: cover 只在有明确宽高的元素上才起作用。如果父容器是 div 且没设 height，它默认高度由内容撑开，图片自然“盖不满”。
- 检查容器是否设置了
width和height（或min-height） - 用
devtools看该元素的 computed height 是否为0px - Flex 或 Grid 容器中，子项需显式声明
height: 100%才能继承父高
cover 和 contain 的关键区别
cover 保证填满容器，但可能裁剪；contain 保证全部可见，但留白。选哪个取决于设计意图，不是“cover 更高级”。
-
cover：按比例缩放图片，直到**短边刚好覆盖容器对应边**，超出部分被裁剪 -
contain：按比例缩放图片，直到**长边刚好贴合容器对应边**，另一方向留空 - 响应式场景下，
cover在竖屏/横屏切换时裁剪区域会变，要留意关键内容是否总在安全区
background-position 影响 cover 的实际显示效果
cover 自身不决定哪部分图片显示出来，真正控制“裁哪一块”的是 background-position。默认值 50% 50% 是居中，但经常需要手动调整。
- 人物照片常用
background-position: center top避免头部被裁 - 风景图若天空占比大，可试
background-position: center bottom - 用百分比值（如
20% 30%）比关键词更精确，但需配合设计稿定位
移动端和 Safari 的兼容性注意点
现代浏览器都支持 cover，但老版 Safari（iOS 6–9）对 background-size 在某些 flex 容器中解析异常，且不支持 background-image 与 background-attachment: fixed 同时使用。
立即学习“前端免费学习笔记（深入）”；
- 真机测试必做，尤其 iOS 微信内置浏览器（基于旧版 WKWebView）
- 避免在
position: fixed元素上依赖cover+background-attachment: fixed - 必要时加前缀（虽已基本不用）：
-webkit-background-size: cover
background-size: cover 就完事——容器尺寸、定位偏移、设备渲染差异，三者少一个都可能让图片“看起来没盖住”。 
