CSS问题：绝对路径不适用于背景图像答案

【问题标题】：CSS issue: absolute path not working for background imageCSS问题：绝对路径不适用于背景图像
【发布时间】：2018-11-12 15:30:09
【问题描述】：

在一个简单的静态网页项目中，我的main.css 中有以下内容：

.navbar-custom {
  background: rgb(52, 73, 94);
  background: rgba(52, 73, 94, 0.7);  /* navbar-bgcolor */
  background-image: url(../../images/distant-lights.jpg);
  background-size: cover;
  /* background-image: url(https://jessicasse.files.wordpress.com/2012/10/distant-lights-1-1152x8641.jpg); */
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  font-family: 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Calibri, Arial, sans-serif;  /* heading font */
}

这按预期工作。但是，如果我修改背景图像行并指定绝对路径/images/distant-lights.jpg，则图像不会显示。

项目结构如下：

即使 HTML+CSS 与相对路径一起工作，我想知道为什么绝对路径会失败。如您所见，我尝试了使用 http 的绝对 URL，效果很好。

【问题讨论】：

你试过调试吗？尝试在开发工具中打开路径，看看会发生什么。

标签： html css background-image absolute-path

【解决方案1】：

/images/distant-lights.jpg

这不是绝对路径。绝对路径从系统根目录开始。在典型的 linux 系统上，它看起来像这样：

/home/username/somefolder/someotherfolder/projectfolder/images/distant-lights.jpg

【讨论】：

啊，所以 HTML/CSS 项目不能将基本文件夹用作实际的“基础”？我认为它确实如此，因为 IDE 自动完成功能使用这个“绝对”路径，这就是在指定资源文件夹后调用 Java 资源的方式。有没有办法指定基本文件夹并调用与 HTML/CSS 项目中的所有路径相关的路径？
这取决于你如何为网页提供服务，因为你提到它是一个“简单的静态网页项目”，我假设你没有使用网络服务器。