Является ли относительный путь в файле CSS относительно файла CSS?

При работе с CSS, ссылки на внешние файлы, такие как изображения и другие CSS-файлы — обычная практика. Понимание относительного пути этих ссылок имеет решающее значение для правильного расположения файла.

Относительный путь в CSS: более внимательный взгляд

Относительный путь в файле CSS относится к сам файл CSS, а не файл HTML, использующий файл CSS. Это означает, что при указании пути к изображению или другому файлу вам необходимо указать путь, который начинается с каталога, в котором находится файл CSS.

Понимание на примере

Чтобы продемонстрировать эту концепцию, рассмотрите следующий макет:

• Страница: page.htm (Расположение: не имеет значения)
• CSS: /resources/css/styles. css
• Изображение: /resources/images/image.jpg

В файле CSS (styles.css):

div {
  background-image: url('../images/image.jpg');
}

В этом примере путь к изображению (image.jpg) в файле CSS начинается с ../. Это означает «перейти на один каталог вверх» от местоположения файла CSS (styles.css), а затем перейти в каталог изображений, где хранится изображение.