background-image 用法不对，图片根本不会显示
最常见的问题是写成了 background-image: url(image.jpg) 却没加引号或路径错误，浏览器直接忽略这条样式。CSS 里 url() 的参数如果含空格、特殊字符或相对路径层级不对，就会静默失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 路径优先用相对路径，从 CSS 文件所在目录出发算起，比如 CSS 在
/css/style.css，图在/images/bg.png，就写url(../images/bg.png) - 文件名带空格或中文？必须加引号：
url("bg main.jpg")，否则解析中断 - 用浏览器开发者工具的「Computed」面板看
background-image是否被计算出来，如果显示none，说明路径或语法有误
背景图铺不满、拉伸变形或只显示左上角一小块
background-image 默认平铺（repeat），且不自动缩放适配容器尺寸。很多人以为设了图就“撑满页面”，其实它默认行为更像贴纸——原尺寸+重复+不裁剪。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 要全屏覆盖且不变形，必须配
background-size: cover+background-position: center+background-repeat: no-repeat - 想等比缩放填满整个容器（可能有留白），用
background-size: contain - 注意：
cover可能裁剪边缘，contain可能留白，别无脑抄代码，得看设计需求
body 上设背景图，但内容滚动时背景跟着动
这是默认行为，background-attachment 值是 scroll（随内容滚动）。想要“固定背景”，比如视差效果或沉浸式首屏，必须显式设置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加
background-attachment: fixed就能锁住背景，但注意：ios safari 旧版本和部分安卓 webview 对fixed支持不稳定，会降级为scroll - 如果要兼容性更强，改用
position: fixed的<div> 层叠在 body 下方，再给它设背景图 <li>用 <code>fixed时，记得同时设background-origin: border-box和background-clip: border-box，避免边框遮挡或裁剪异常 - 一律改用 CSS 控制，写在
body或html选择器里，比如body { background-image: url(...); } - 别在
<div style="background: ..."> 里写复杂背景逻辑，可读性和维护性极差，抽成 class 更稳妥 <li>如果项目里还混着内联 <code>background属性，优先清理——不是因为它“不能用”，而是它堵死了后续所有样式扩展可能
html 标签里用 background 属性？早就不推荐了
像 这种写法是 HTML4 遗留语法，所有现代浏览器虽还支持，但属于废弃属性（deprecated），W3C 不再维护，也不支持任何样式控制（比如缩放、定位）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
背景图看着简单，但路径、尺寸、定位、固定行为、兼容性这五点只要漏掉一个，就容易卡住半天。尤其是 background-size 和 background-attachment 的组合效果，在不同设备上表现差异很大，真要上线前，至少得在 iOS Safari 和 chrome android 里各点开一次滚动看看。