最可靠方式是在 body 或 html 元素用 background-image 设置背景图，需配 cover、min-height: 100vh、background-color 降级，并注意裁剪定位与加载优化。
用 CSS background-image 设置 HTML 页面背景图
直接在 body 或 html 元素上设置 background-image 是最常用也最可靠的方式。别用 <img> 标签硬塞进页面顶部——它不是背景，是内容元素，会破坏语义和布局流。
实操建议：
- 把图片放在
./images/bg.jpg这类明确路径下，CSS 中写相对路径：background-image: url('./images/bg.jpg'); - 必须配
background-size: cover;，否则小图重复平铺、大图只显示左上角，都很糟心 - 加上
background-attachment: fixed;可实现视差滚动效果，但注意 iOS Safari 和部分安卓浏览器不支持或有性能问题 - 记得设
background-color作降级色，等图加载时不会白屏
避免 body 高度塌陷导致背景图不显示
常见现象：写了背景图，但只在首屏高度显示，往下滚动就变白。这是因为 body 默认高度由内容撑开，没内容时高度为 0 —— 背景自然没地方画。
解决方法（二选一）：
- 给
html和body同时设height: 100%;，再给body加min-height: 100vh; - 更稳妥的做法：只对
body设min-height: 100vh;，不碰html的 height，兼容性更好
background-position 怎么调才不切头切脸
用 cover 时图片会被缩放裁剪，background-position 决定裁哪一块。默认 center center 适合构图居中的图；如果人物偏左，背景里人被切掉半张脸，就该调位置。
常用值和效果：
-
center top：保留顶部内容，适合有天空/标题区域的图 -
left center或right center：把主体往左/右拉，避免居中构图被裁 - 用像素值如
20px 10px微调，但响应式下容易失效，慎用
图片加载慢？加个 loading 占位或渐显过渡
背景图是 CSS 触发的，浏览器不会触发 load 事件，没法像 <img> 那样监听。所以“加载中”状态得靠别的办法。
实用方案：
- 内联一个 base64 小尺寸模糊图做
background-image，再用媒体查询或 JS 换成高清图 - 用
background-image叠两层：linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(...)，既压暗图提升文字可读性，又让加载过程不突兀 - 真要 JS 控制，可用
image.onload加载一张隐藏<img>，再改 body class 触发 CSS 过渡，比如body.loading { opacity: 0.5; }
真正难的不是设上背景，而是让不同尺寸屏幕、不同网速、不同设备都看起来自然。图的构图、压缩质量、fallback 颜色，每个细节都会在某个用户那里暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
