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