最可靠方式是用 background-size: cover 配合 background-attachment: fixed 实现全屏背景图；需确保容器 height: 100vh、background-position: center、background-repeat: no-repeat，并避免误用 img 标签或 background-size: 100% 100% 导致失真。
直接用 background-size: cover 配合 background-attachment: fixed 最可靠，不是所有“满屏”都等于“拉伸填满”，得先分清你要的是全屏背景图，还是把 <img> 标签撑满视口——后者容易破坏布局、触发滚动条或模糊失真。
用 CSS 设置全屏背景图片（推荐）
这是最常用也最稳妥的方式，适用于网页首屏大图、登录页、宣传页等场景。核心是让 body 或某个容器撑满整个视口，并控制背景行为：
-
height: 100vh确保容器至少占满一屏高度（vh是 viewport height） -
background-image: url(...)设置图片路径，注意相对路径要以 HTML 文件为基准 -
background-size: cover关键：等比缩放并裁切，确保完全覆盖容器，不留白 -
background-position: center center防止关键内容（比如人脸）被裁掉 -
background-attachment: fixed可选：实现视差滚动效果；但移动端兼容性差，部分 iOS Safari 会禁用或导致卡顿
示例代码：
body {
margin: 0;
height: 100vh;
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
为什么不用 <img> 标签做全屏背景？
有人会想直接写 <img src="..." style="max-width:90%">，这看似简单，但实际问题不少：
- 图片宽高比和屏幕不一致时，
100vw/100vh会强制拉伸，导致严重变形 -
<img>是流内元素，默认有display: inline，可能产生底部空白（由基线对齐引起） - 无法像背景图那样用
background-position精准控制焦点区域 - 如果图片加载失败，会显示丑陋的缺省图标或空白边框
- 语义错误：背景图不是内容主体，不该用
<img>（影响可访问性和 SEO）
cover 和 contain 的区别必须搞清
这两个值决定图片如何适配容器，选错就达不到“满屏”效果：
-
background-size: cover→ 等比缩放，直到图片的宽或高至少有一个填满容器，多余部分裁剪。适合强调视觉冲击，但可能切掉边缘内容 -
background-size: contain→ 等比缩放，直到图片完全可见，留白不可避免。适合展示完整图表、Logo 等需要全貌的场景 - 别用
100% 100%：这是强制拉伸，一定失真，尤其在宽高比差异大的设备上（比如手机竖屏 vs 宽屏显示器）
移动端适配和常见坑
iOS Safari 和部分安卓浏览器对 vh 单位支持不稳定（比如地址栏收起/展开时 100vh 会变化），导致背景图突然跳动或截断：
- 替代方案：用
min-height: 100vh+height: 100%组合，再加body { overflow-x: hidden }防横向滚动 - 图片体积务必压缩：全屏背景图建议控制在 200KB 以内，用 WebP 格式，配合
<picture></picture>响应式切换 - 记得加
background-color作为降级色：网络慢或图片加载失败时不至于一片空白 - 避免在
body上直接设背景图后又加其他定位元素——父容器没高度，子元素position: absolute可能失效
真正难的不是写那几行 CSS，而是判断“满屏”到底要满足什么条件：是保证关键内容始终可见？还是严格禁止任何留白？或是适配折叠屏、横竖屏切换？这些需求会倒推你选 cover 还是 fixed，甚至要不要 JS 动态计算尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
