17370845950

背景图片不显示最常见的原因是background-image路径错误；CSS路径相对于CSS文件位置而非HTML文件，需确认相对路径正确、文件真实存在且命名严格匹配（含大小写），并用开发者工具Network标签检查请求状态码。

背景图片不显示，最常见原因是 background-image 路径写错了。CSS 里的路径是相对于 CSS 文件所在位置计算的，不是相对于 HTML 文件，这点很多人会搞混。

检查图片路径是否为相对路径且位置正确

CSS 中写的路径必须准确指向图片文件。比如你的项目结构是：

• css/style.css
• images/bg.jpg

那么在 style.css 里应该这样写：

background-image: url("../images/bg.jpg");

注意：从 css/ 目录向上退一级（../），再进 images/ 才能找到图片。

确认图片文件真实存在且命名完全一致

大小写、空格、扩展名都要严格匹配。Windows 系统可能不敏感，但服务器（尤其是 Linux）区分大小写。例如：

• 写成 bg.JPG，但实际文件是 bg.jpg → 不显示
• 路径中多了空格，如 url(" images/bg.jpg") → 不生效
• 用了中文或特殊字符命名，未编码也容易出错

用浏览器开发者工具快速定位问题

右键页面 →「检查」→ 切到「Network」标签 → 刷新页面 → 在筛选栏输入图片名（如 bg.jpg）：

• 如果没出现，说明 CSS 根本没加载该请求（路径错或样式未生效）
• 如果状态码是 404，说明路径不对
• 如果状态码是 200 但图片仍不显示，可能是尺寸、重复方式或元素本身无宽高导致不可见

临时改用绝对路径或在线图片快速验证

为排除路径干扰，可先用绝对路径测试（开发阶段）：

background-image: url("/images/bg.jpg"); /* 以网站根目录为起点 */

或者直接用一张在线图片：

background-image: url("https://via.placeholder.com/200x100/4a90e2/ffffff?text=Test");

如果这时能显示，就 100% 确认是本地路径问题，再回头核对相对路径。