CSS background-image引入jpg仅Live Server正常 普通服务器不显示如何修复

出问题的CSS代码如下：

background-image: linear-gradient(rgba(0, 72, 121, 0.7),rgba(64, 86, 97, 0.7)),url(/images/background.jpg);

两种环境下表现不一致，核心是路径解析规则的差异：
路径开头的/代表站点根目录，这个目录的实际指向完全由服务器配置决定，和你本地项目的文件夹层级没有必然关系：

• Live Server运行时，默认把你当前打开的项目文件夹直接设为站点根目录，请求/images/background.jpg会精准匹配到项目内的图片文件，所以能正常展示。
• 切换到普通服务器时，如果你没有把项目文件夹设为站点根目录（比如项目放在站点的子文件夹里），/images/background.jpg会直接去服务器最顶层的根目录找图片，根本不会进入你存放项目的子文件夹，自然加载失败。渐变效果是浏览器直接解析CSS参数生成的，不需要加载外部资源，所以不受路径影响可以正常显示。

根据你的部署场景选一种即可：

• 改用相对路径（最推荐，兼容性最好）：相对路径是相对于当前CSS文件的位置寻址，完全不受服务器根目录配置影响。如果你的CSS文件和images文件夹都在项目根目录下，直接把路径改为url(./images/background.jpg)就能适配所有运行环境。
• 调整服务器配置：如果不想修改原有代码路径，直接把项目所在的文件夹设置为普通服务器的站点根目录，保证访问http://服务地址/images/background.jpg可以直接打开目标图片，原有绝对路径就能正常生效。
• 补全子目录前缀：如果项目必须部署在站点的子目录下，又想保留绝对路径写法，就在路径前补上项目的子目录前缀，比如项目部署在站点的/demo/目录下，路径就修改为url(/demo/images/background.jpg)。

快速排查技巧：打开浏览器开发者工具，切换到「网络」面板筛选图片类请求，查看背景图的实际请求地址，和服务器上图片的真实存储路径做对比，就能立刻确认路径错位的具体位置。

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