真正卡住的不是代码，是浏览器默认行为；body 默认有 margin: 8px 且无显式高度，导致背景仅渲染在内容区域，需 html, body { margin: 0; height: 100%; } 补全继承链。
直接在 body 上用 background 简写属性一行就能生效，但不设高度和重置 margin 会留白、不铺满——真正卡住的不是代码，是浏览器默认行为。
为什么在线运行时背景图只显示左上角一小块？
在线编辑器（如 JSFiddle、CodePen、Playcode）默认渲染的是 body 内容区域，而 body 自带 margin: 8px，且没有显式高度，导致背景只画在“有内容”的那几像素高里。
- 必须加
html, body { margin: 0; height: 100%; }补全继承链；只写body { height: 100vh; }在部分环境（比如嵌套 iframe 的在线运行器）下仍会塌陷 - 图片路径填相对路径时，以 HTML 文件位置为基准——但多数在线平台不支持本地文件上传，得用绝对 URL（如
https://via.placeholder.com/1200x800）或平台提供的资源链接 - DevTools 的 Network 面板里看请求是否返回 404，比“没看到”更可靠
background 简写语法怎么写才不踩坑？
用 background 一行合并比分开写 background-image + background-size 更稳，但顺序和斜杠分隔符容易错。
- 正确写法：
background: url("https://example.com/bg.jpg") no-repeat center/cover;（注意/是background-position和background-size的分隔符） - 错误写法：
background: url(...) cover no-repeat center;——cover必须紧贴/前，否则被当作文本值忽略 - 别用
100% 100%：强行拉伸变形，尤其在宽屏或移动端上人脸被压扁、文字糊成色块 - 如果图太小（比如 320×240），
cover会放大模糊但不报错，肉眼难察觉——建议用至少 1200px 宽的图
在线平台里怎么让背景图“真·全屏”？
很多在线运行器把 HTML 渲染在 iframe 里，而 100vh 是按 iframe 高度算的，可能比视口小。这时候靠 min-height: 100vh 更保险。
- 推荐组合：
html { height: 100%; } body { margin: 0; min-height: 100vh; background: url(...) no-repeat center/cover; } - 加
background-color: #eee;作降级：图片加载慢或失败时不至于白屏 - 想实现固定视差效果？加
background-attachment: fixed;，但 iOS Safari 会禁用该行为，必要时补transform: translateZ(0);强制硬件加速 - 文字压图看不清？别给整个
body加opacity——改用渐变叠加：background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(...);
最常被跳过的其实是路径计算逻辑和高度继承链，而不是属性本身。在线运行时看不到图，八成不是 CSS 写错了，是浏览器根本没发出有效请求，或者发出了却 404 了——先开 Network 面板，再调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
