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