CSS Background-image无法显示求助：仅VS Code Live Server可正常显示

问题核心 #

你的CSS里背景图路径用了绝对路径：url(/img/banner.jpg)，这是导致不同环境表现不一致的关键：

• Live Server启动时会把EcoFarm目录作为网站根目录，/img/正好指向EcoFarm/img/，所以能正常加载；
• 直接双击本地index.html时，浏览器会把电脑磁盘根目录（比如C:\）当作根目录，/img/banner.jpg会去C:\img\banner.jpg查找，自然找不到；
• 上传到主机后，若主机站点根目录配置层级不同，或者你的站点放在子目录下，/img/同样会指向错误位置。

解决方案 #

把绝对路径改成相对路径，两种正确写法任选：

1. 直接写相对路径：url(img/banner.jpg)（适用于CSS文件和index.html同层级，且img文件夹在EcoFarm下的情况）；
2. 明确相对当前HTML文件的路径：url(./img/banner.jpg)（写法更清晰，避免路径歧义）。

修改后的核心CSS代码：

.banner{
    background: url(img/banner.jpg); /* 或 url(./img/banner.jpg) */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(80vh - 80px);
    text-align: center;
}

额外检查项 #

• 确认图片文件名、后缀完全匹配（部分主机系统区分大小写，比如banner.jpg和Banner.jpg会被视为不同文件）；
• 上传主机时，确保img文件夹及内部图片完整上传，且文件权限设置正确（避免主机禁止访问该目录）。

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