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

Question

在一个简单的静态网页项目中，我有以下内容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 与相对路径一起使用，我也想知道为什么绝对路径会失败。如您所见，我尝试了使用 的绝对 URL http，并且效果很好。

标签： htmlcssbackground-imageabsolute-path

Answer 1

/images/distant-lights.jpg 

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

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