为何通过Live Server能正常加载背景图，使用file://协议却失败？

问题出在你用的绝对路径开头的斜杠上：

• Live Server会把你的项目文件夹当作服务器根目录，/images/background_home.jpg会指向项目内的images文件夹，所以能正常加载。
• 但用file://协议打开本地文件时，/代表的是系统根目录（比如Windows的C:\，macOS的/），浏览器会去系统根目录找images文件夹，自然找不到你的图片，因此报出ERR_FILE_NOT_FOUND错误。

解决方法很简单，把路径改成相对路径：

• 如果你的index.html和images文件夹在同一层级（项目根目录下同时存在这两个），直接去掉开头的斜杠即可：

body {
  background-image: url("images/background_home.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  font-family: "Roboto", sans-serif;
  position: relative;
}

• 如果你的CSS文件在子文件夹（比如css/style.css），需要回退一级目录再找images，路径写成url("../images/background_home.jpg")

这样不管是用Live Server还是直接打开本地文件，背景图都能正常加载了。

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