CSS背景图cover属性使用方法

想让CSS的`background-size: cover`真正生效，光写这一行代码远远不够——它高度依赖容器是否有明确宽高（尤其在Flex/Grid布局中子项需显式设`height: 100%`），受`background-position`精准控制裁剪区域（如人物用`center top`保全头部），且在移动端和旧版Safari中存在兼容性陷阱；cover与contain的本质区别在于“填满裁剪”还是“完整可见”，选错会直接影响视觉传达。真正实现背景图严丝合缝地覆盖容器，是一场尺寸、定位与设备渲染的协同作战。

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 就完事——容器尺寸、定位偏移、设备渲染差异，三者少一个都可能让图片“看起来没盖住”。

好了，本文到此结束，带大家了解了《CSS背景图cover属性使用方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！