CSS为HTML网站添加背景图的路径问题求助

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

项目根目录/
├─ assets/
│  └─ CSS/
│     └─ welcome/
│        └─ [你的CSS文件].css
├─ images/
│  └─ welcome/
│     └─ 6.jpg
└─ [你的HTML文件].html

问题核心：内联CSS的路径是相对于HTML文件的（HTML在根目录，所以url(images/welcome/6.jpg)能直接找到图片），但外部CSS的路径是相对于CSS文件本身位置的，这是你之前路径无效的关键原因。

正确的相对路径写法 #

用../../../../images/welcome/6.jpg，具体逻辑：

• 从CSS所在的welcome/目录回退1级到CSS/：../
• 再回退1级到assets/：../
• 再回退1级到项目根目录：../
• 最后进入根目录下的images/welcome/6.jpg

所以CSS代码应该是：

/* Background image */
background-image: url('../../../../images/welcome/6.jpg');

为什么之前的路径无效？ #

• ../images/welcome/6.jpg：只回退了1级到CSS/，会去CSS/images/welcome/6.jpg找文件，这个路径不存在
• /images/welcome/6.jpg：这是绝对路径，在U盘直接打开HTML（file://协议）时，会指向本地磁盘的根目录（比如C:/images/...），而不是U盘的项目根目录，自然找不到图片

验证小技巧 #

你可以手动在U盘里按路径走一遍：从assets/CSS/welcome/开始，依次进入上级文件夹，直到根目录，再进入images/welcome/，确认6.jpg存在，这样就能确保路径逻辑正确。

内容的提问来源于stack exchange，提问作者chadito32