背景图不显示的主因是url()路径错误，CSS中路径相对于CSS文件而非HTML；其次可能被其他CSS规则覆盖、元素无宽高、图片格式/权限/CDN跨域等问题导致。
background-image路径写错导致图片不显示
绝大多数背景图失效，根本原因就是url()里的路径不对。CSS文件里的路径是相对于CSS文件位置算的，不是HTML页面位置——这点特别容易搞混。
比如你的项目结构是：/css/style.css 和 /images/bg.jpg，那在style.css里必须写：background-image: url("../images/bg.jpg");
- 用相对路径时，优先试
../往上退一级，再拼目标文件夹 - 绝对路径（从域名根目录开始）更稳：
url("/images/bg.jpg")，但要确保服务器真能访问到该路径 - 别直接粘贴本地文件路径（如
C:\xxx\bg.jpg），浏览器根本不认 - 路径里有空格或中文？赶紧改掉，否则大概率404
外部CSS中background-image不生效的常见干扰项
即使路径对了，也可能被其他规则压住。CSS优先级、重复声明、属性拼写错误，都会让background-image看起来“没反应”。
- 检查是否被
background: none或background: #fff这类简写覆盖——background会一次性重置所有背景相关属性 - 确认元素有宽高：
div没内容又没设height，背景图自然看不见 - 开发者工具里看Computed面板，确认
background-image最终值是不是none或url("") - 如果用了CSS预处理器（如Sass），注意
@import顺序和作用域，变量或嵌套可能意外屏蔽样式
加载失败时如何快速定位问题
浏览器控制台Network标签页比肉眼猜快得多。重点盯住图片请求的状态码和响应头。
立即学习“前端免费学习笔记（深入）”；
- 看到
404：路径错了，回上一节核对 - 看到
403：服务器拒绝访问，检查文件权限或Nginx/Apache配置是否禁止了images/目录 - 看到
200但图还是不显示：打开这个链接，看浏览器是否真能渲染图片——可能是格式不支持（如WebP在老浏览器）、尺寸为0、或图片本身损坏 - 用
curl -I http://yoursite.com/images/bg.jpg看返回头，确认Content-Type是image/jpeg这类正确类型
CDN或跨域场景下background-image的注意事项
图片放在CDN或另一个域名时，路径写法不变，但得留意CORS和缓存策略。
- CDN地址直接写完整URL：
background-image: url("https://cdn.example.com/assets/bg.png"); - 如果背景图需要用户上传或动态生成，确保CDN开了
Access-Control-Allow-Origin，否则部分浏览器会静默失败 - CDN缓存太久？加版本参数绕过：
url("bg.jpg?v=1.2.3")，但注意不要影响HTTP缓存协商机制 - 不要把敏感路径（如
/admin/uploads/xxx.jpg）直接暴露在CSS里，容易被爬取
