background-image路径错误是背景图不显示的首要原因，必须确保路径相对于html文件位置正确，且元素有宽高、未被隐藏；根路径“/”仅在服务器环境下有效，本地file://协议下必失效；同时需避免复合属性覆盖、高度链断裂及缓存干扰等问题。
background-image 路径怎么写才不 404
路径错是背景图不显示的头号原因，浏览器不会报错，只会安静地画一片空白——你得自己去 Network 面板确认是否返回 404。
关键判断依据：路径必须相对于 HTML 文件所在位置算，不是相对于 CSS 文件，也不是相对于服务器根目录（除非你明确用了以 / 开头的绝对路径）。
- HTML 在
/index.html，图片在/assets/bg.jpg→ 写url("assets/bg.jpg") - HTML 在
/pages/home.html，图片在/assets/bg.jpg→ 写url("../assets/bg.jpg") - 想绕过相对路径陷阱？统一用根目录绝对路径：
url("/assets/bg.jpg")，前提是部署后该路径真实存在 - Windows 本地双击打开 HTML？
file://协议下，/指向磁盘根目录，几乎必挂；此时只能用相对路径或./显式声明
body 上设背景图为什么只显示一小块
不是图没加载，而是 body 默认没有高度，它只撑开内容区域的高度，背景自然只画在那一小块里。
必须补全高度继承链，且不能只靠 height: 100vh —— 它在某些安卓 WebView 或内容超长时会失效。
- 强制清空默认边距：
html, body { margin: 0; padding: 0; } - 让
html拿到视口高度：html { height: 100%; } - 让
body至少占满视口，又允许内容撑高：body { min-height: 100vh; } - 漏掉
background-repeat: no-repeat？小图会默认平铺成马赛克，看起来像“只显示一小块”，其实是铺满了
background 和 background-image 混用容易踩什么坑
background 是复合属性，一写就覆盖所有子属性。新手常以为写了 background: url(...) 就够了，结果 background-repeat、background-color 全被重置为默认值。
- 单独控制图推荐分写：
background-image: url(...); background-repeat: no-repeat; background-size: cover; - 如果非要用
background一行写，必须显式带齐关键参数：background: url(bg.jpg) no-repeat center/cover #f0f0f0;（注意/分隔position和size） - 想 fallback 到颜色？别用
background: #fff, url(...)（语法错误），正确写法是：background-color: #f0f0f0; background-image: url(...); -
background-attachment: fixed在 iOS Safari 上可能触发渲染卡顿，慎用；改用伪元素模拟更稳妥
移动端 cover 为啥有时裁得太狠或留白
background-size: cover 的等比缩放逻辑本身没问题，但实际效果取决于容器宽高比和图片原始比例。iOS 和部分老安卓 WebView 对 cover 的实现有细微差异，尤其在横竖屏切换时。
- 优先确保父容器有明确宽高比，比如用
aspect-ratio: 16/9（现代浏览器支持）或 JS 动态计算 - 对关键内容区域（如标题），用
background-position: center top把顶部锚定，避免被裁掉 - 真要兼容性兜底？加一行
background-size: -webkit-cover;，但仅限 Safari 旧版本 - 图片本身分辨率太低（如
320×240）时，cover会强行放大导致模糊，这不是 CSS 问题，是资源问题
background-image 都白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
