Atom-Live-Server与浏览器渲染差异：本地背景图无法显示问题

问题核心原因 #

• 直接用Chrome打开本地HTML文件时，浏览器使用file://协议访问本地文件系统，能识别你写的系统绝对路径/Users/Elijah/Desktop/HTML_Projects/Dasmoto/Resources/images/pattern.jpeg，所以背景图正常显示。
• atom-live-server本质是启动了一个本地HTTP服务器（以http://localhost:xxxx形式访问），此时服务器的根目录是你的项目文件夹（即Dasmoto文件夹）。你写的系统绝对路径对HTTP服务器来说是无效的——它会把/Users/...当成服务器根目录下的路径，自然找不到对应的图片文件。而在线URL是通过HTTP协议直接请求远程资源，服务器能正常解析，所以可以显示。

解决办法 #

使用相对服务器根目录的相对路径，根据你的项目结构调整：
假设你的项目文件结构是：

Dasmoto/
├── index.html
├── style.css
└── Resources/
    └── images/
        └── pattern.jpeg

则CSS里的背景图路径应改为：

#header{
  font-family: Helvetica;
  font-size: 100px;
  font-weight: bold;
  color: khaki;
  text-align: center;
  background-image: url("Resources/images/pattern.jpeg");
}

如果你的CSS文件放在单独的css文件夹中，就需要用../回到上一级目录：

background-image: url("../Resources/images/pattern.jpeg");

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