Проблема с CSS: абсолютный путь не работает для фонового изображения

В простом проекте статической веб-страницы в моем 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, и это прекрасно работает.


person Chthonic Project    schedule 02.06.2018    source источник
comment
Вы пробовали отлаживать? Попробуйте открыть путь в инструментах разработчика и посмотрите, что произойдет.   -  person Nikki Mather    schedule 03.06.2018


Ответы (1)


/images/distant-lights.jpg 

Это не абсолютный путь. Абсолютный путь начинается с корневого каталога системы. В типичной Linux-системе это выглядит примерно так:

/home/username/somefolder/someotherfolder/projectfolder/images/distant-lights.jpg
person Siddharth Singh    schedule 02.06.2018
comment
Ах, значит, проекты HTML/CSS не работают с базовой папкой в ​​качестве фактической базы? Я предположил, что это так, поскольку автозаполнение IDE работало с этим «абсолютным» путем, и именно так ресурсы Java вызываются после указания папки ресурсов. Есть ли способ указать базовую папку и вызвать все пути относительно нее в проектах HTML/CSS? - person Chthonic Project; 03.06.2018
comment
Это зависит от того, как вы обслуживаете веб-страницу, поскольку вы упомянули, что это простой проект статической веб-страницы, я предположил, что вы не используете веб-сервер. - person Siddharth Singh; 03.06.2018