background-size: cover 是最常用方案，但需配合相对路径、显式容器尺寸、媒体查询换图及 canvas 绘图逻辑同步缩放才能真正实现可靠响应式背景。
background-size: cover 是最常用且可靠的方案，但仅靠它无法解决路径错误、本地加载失败、容器无尺寸或响应式断点缺失等问题。
为什么 background-image 在 index.html 里不显示
常见错误是直接写 url("c:\bg.jpg") —— 浏览器拒绝加载本地绝对路径，报错 net::ERR_FILE_NOT_FOUND 或静默失败。开发时必须用相对路径（如 ./assets/bg.jpg）或通过本地服务器访问（Live Server / Vite / Python -m http.server）。
另一个高频原因是父容器没宽高：如果 或目标元素没有显式 height，背景图会“存在但不可见”。尤其在空页面中，body 高度默认为 0。
- 检查元素是否渲染出高度：给目标元素加临时
border: 1px solid red看是否可见 - 避免只设
min-height而不设height，某些布局下它不触发背景渲染 - 不要依赖
html, body { height: 100% }就完事——需确保所有祖先链都有明确高度传递
cover 和 contain 的实际区别与选型
background-size: cover 缩放图像使其完全覆盖容器，保持比例，但可能裁剪边缘；background-size: contain 缩放图像使其完整可见，保持比例，但四周可能留白。二者都依赖 background-position: center 才能视觉居中。
选型关键看图像内容：
- 用
cover：横幅、首屏大图、强调氛围感的装饰图（如产品主视觉） - 用
contain：Logo、图标、信息图表等需完整呈现细节的图像 - 慎用
100% 100%：强制拉伸，必然失真，除非你明确需要像素化效果
注意：cover 在窄高容器（如手机竖屏）下容易裁掉关键人物脸部，此时应配合 background-position: top 或媒体查询微调。
如何让背景图真正响应不同设备
单靠 background-size 不够。必须组合三要素：容器尺寸可控 + 断点切换资源 + 视口单位参与布局。
- 容器高度推荐用
height: 100vh，而非固定像素，否则小屏上溢出、大屏上留白 - 用媒体查询按真实断点换图：
@media (max-width: 768px) { .hero { background-image: url("./assets/bg-mobile.jpg"); } } - 若图本身有构图差异（比如桌面版是全景、移动端聚焦人脸），必须用
<picture></picture>+<source></source>，background-image无法实现艺术方向切换 - WebP/AVIF 图片需 fallback：CSS 中无法优雅降级，建议服务端根据
Accept头返回，或前端 JS 检测后动态插入 class
Canvas 背景图和普通 HTML 元素的区别
给 <canvas></canvas> 设 background-image 看似可行，但极易踩坑：canvas 绘图坐标系独立于 CSS 渲染层，缩放 canvas 元素时，CSS 背景会随元素缩放，而 ctx.drawImage() 绘制的内容不会自动对齐，导致错位。
更稳妥的做法是：不用 CSS 背景，改用 ctx.drawImage() 把图片画进 canvas 内部，并手动处理缩放逻辑。
- 先用
canvas.width/canvas.height获取当前绘制分辨率（非 CSS 像素） - 用
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)控制源区域与目标区域，实现类似cover效果 - 监听
window.resize并重新计算绘制尺寸，避免 canvas 缩放后背景模糊
真正复杂的响应式 canvas 场景，背景图只是表象，底层绘图逻辑是否同步缩放才是核心难点——这点常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
