CSS全屏背景图设置方法及cover属性详解

想让CSS背景图真正全屏铺满且清晰响应，关键不在background-size:cover本身，而在于彻底解决html和body的默认样式陷阱——必须同时清除margin、设height:100%（避免用不稳定的100vh），并正确配置viewport；cover与contain的本质区别在于“裁剪优先”还是“完整优先”，选择取决于设计目标；而要兼顾高清显示与性能，还需结合多分辨率图片方案或更可控的picture+object-fit替代方案，否则再精细的CSS也难逃模糊、留白或移动端失效的窘境。

background-size: cover 为什么图片没铺满整个屏幕

根本原因不是属性写错了，而是 html 和 body 默认有 margin 和 height 不足。浏览器里 body 默认只包裹内容高度，哪怕设了 background-size: cover，父容器没撑开，图片照样缩在一小块里。

• 必须给 html 和 body 都设 height: 100%，否则 cover 没参照的“全屏”高度
• 清除 body 默认 margin：margin: 0，不然顶部/左右会露白边
• 背景图要设在 html 或 body 上，设在某个 div 里就只是铺满那个 div，不是“全屏”

cover 和 contain 的实际区别在哪

cover 是等比缩放后“覆盖”整个容器，可能裁剪；contain 是等比缩放后“完整显示”，可能留空。选哪个不看喜好，看设计需求。

• 用 cover：Banner 图、视觉主导的首屏，允许上下或左右被切掉一部分
• 用 contain：Logo 背景、图标示意、需要看清全部内容的场景
• 注意：两者都依赖容器尺寸。如果容器宽高比和图片不一致，差异立刻显现

移动端上 background-size: cover 失效的常见原因

不是 CSS 不支持，是 viewport 设置或设备缩放干扰了“视口尺寸”的计算逻辑。

• 漏写 viewport meta：，iOS Safari 尤其敏感
• 页面有横向滚动（比如子元素溢出），会导致 body 宽度变大，cover 按这个错误宽度缩放
• 某些安卓 WebView 对 100vh 解析不准（地址栏收起/弹出会变），建议优先用 100% 而非 100vh

如何让背景图真正“响应式”且不模糊

单纯 cover 不解决分辨率适配问题。小图拉伸到大屏会糊，大图在小屏加载又浪费带宽。

• 用 background-image 配合 image-set()（Chrome/Firefox 支持）或媒体查询切换不同分辨率图
• 更稳妥的做法：用 + 替代背景图，再用 object-fit: cover + position: fixed 模拟，可控性更强
• 避免把文字直接叠在背景图上——高对比度区域可能让文字难读，加一层半透明遮罩更可靠

实际项目里最常被忽略的是 html 和 body 的基础样式约束，以及移动端 viewport 的联动影响。这两个点没调对，后面所有优化都是徒劳。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS全屏背景图设置方法及cover属性详解》文章吧，也可关注golang学习网公众号了解相关技术文章。