全屏背景图CSS技巧分享

想让CSS背景图真正全屏铺满且清晰响应？关键不在background-size:cover写得对不对，而在于常被忽略的基础样式：html和body必须同时设置height:100%和margin:0，否则容器高度塌陷、边缘留白，再好的cover也白搭；再加上viewport meta标签缺失、横向溢出导致宽度错乱、100vh在移动端不可靠等问题，都会让“全屏”失效；而要兼顾高清显示与加载性能，还需结合image-set()、媒体查询或更可控的picture+object-fit方案，并辅以遮罩提升文字可读性——搞定这几点，才能让背景图既稳又美。

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技巧分享》文章吧，也可关注golang学习网公众号了解相关技术文章。