CSS背景图片无法显示问题求助

嘿，别着急！我来帮你一步步排查这个背景图不显示的问题，大概率是路径或者细节上的小疏漏：

首先先明确你的项目结构（根据描述整理）：

Spaceship/
├── [你的HTML文件]
├── [你的CSS文件]
└── assets/
    └── images/
        └── bg.png （你提到的PNG图片）

然后看你尝试的两种写法，这里有几个明显的疑点：

1. 路径拼写与实际文件夹/文件名不匹配 #

• 你说assets文件夹里是images子文件夹，但CSS里写的是Assets/imgs——注意大小写（比如assets vs Assets，部分系统/服务器是区分大小写的）和文件夹名称（images vs imgs），这很可能是核心问题！
• 另外你提到是PNG图片，但CSS里写的是bg.jpg，后缀名不对也会导致浏览器找不到文件。

2. 相对路径的基准搞错了 #

相对路径是相对于CSS文件所在的位置，而不是HTML文件。举个例子：

• 如果你的CSS文件直接在Spaceship根目录下，那正确的相对路径应该是：

body {
  background: url(./assets/images/bg.png);
}

• 如果CSS文件是在Spaceship/css/这样的子文件夹里，那路径要回退一级：

body {
  background: url(../assets/images/bg.png);
}

3. 本地绝对路径的限制 #

你用的全量本地绝对路径在Chrome里可能会因为浏览器的安全策略被限制（file://协议有很多访问限制），所以不建议用这种方式，搞定相对路径才是更稳妥的方案。

4. 快速调试技巧 #

打开Chrome开发者工具（按F12），切换到「网络」标签，刷新页面：

• 如果背景图的请求状态是404，那肯定是路径写错了；
• 把CSS里的路径复制到浏览器地址栏，看看能不能直接打开图片，能打开的话说明路径没问题，那可能是CSS其他属性（比如background-size、background-repeat）或者元素高度的问题（比如body没有高度，导致背景图看不到）。

如果是body高度的问题，可以给body加个最小高度：

body {
  min-height: 100vh;
  background: url(./assets/images/bg.png) no-repeat center center;
  background-size: cover;
}

备注：内容来源于stack exchange，提问作者FarBeyond