如何用绝对路径正确引入CSS并确保背景图片正常加载？

问题根源：WebStorm内置服务器的上下文路径 #

WebStorm的内置服务器默认会把项目名称作为上下文路径，比如你的项目文件夹是css-pract，访问页面的URL会是http://localhost:63342/css-pract/index.html。这时候页面里的绝对路径/是指向服务器根http://localhost:63342/，而不是你的项目根http://localhost:63342/css-pract/。

你在CSS里写url("/folder/img/some.jpg")，浏览器会请求http://localhost:63342/folder/img/some.jpg，但实际图片文件在http://localhost:63342/css-pract/folder/img/some.jpg，自然会报404错误。

至于你说HTML里的<img>标签用绝对路径能正常加载，大概率是你误写了路径（比如加了项目名前缀），或者之前修改过服务器配置。

解决方案 #

方案1：修改CSS路径为带项目名的绝对路径 #

把CSS里的图片路径改成：

.has-bg {
  background: url("/css-pract/folder/img/some.jpg");
}

但这种方式不够灵活，换服务器或项目名后需要修改代码。

方案2：调整WebStorm内置服务器的上下文路径 #

将服务器根直接映射到你的项目文件夹：

1. 打开WebStorm的File > Settings（Windows/Linux）或WebStorm > Settings（Mac）
2. 找到Build, Execution, Deployment > Deployment
3. 选择Built-in Server，把Context path设置为/
4. 重启内置服务器，此时绝对路径/就会指向你的项目根css-pract/，CSS里的路径就能正常加载。

方案3：使用CSS相对路径（推荐） #

相对路径是相对于CSS文件本身的位置，更灵活且不受服务器配置影响：
你的styles.css在folder/css/下，图片在folder/img/下，所以相对路径是../img/some.jpg：

.has-bg {
  background: url("../img/some.jpg");
}

这种方式不管服务器根在哪里，都能正确找到图片资源。

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