Используя относительный URL-адрес в файле CSS, какое местоположение оно относительно?

При определении чего-то типа URL-адреса фонового изображения в файле CSS при использовании относительного URL-адреса, где он относится к? Например:

Предположим, что файл /stylesheets/base-styles.css содержит:

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

Если я включу этот стиль в разные документы через <link ... />, относительный URL-адрес в файле CSS будет относительно документа таблицы стилей в /stylesheets/ или относительно текущего документ, в который он входит? Возможные пути:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

ОТВЕТЫ

Ответ 1

Согласно W3:

Частичные URL-адреса интерпретируются относительно источника таблицы стилей, а не относительно документа

Поэтому, отвечая на ваш вопрос, он будет относиться к /stylesheets/.

Если вы думаете об этом, это имеет смысл, поскольку файл CSS может быть добавлен на страницы в разных каталогах, поэтому стандартизация его в файле CSS означает, что URL-адреса будут работать везде, где привязаны стили.

Ответ 2

Это относительно файла CSS.

Ответ 3

Это относительно таблицы стилей, но я бы рекомендовал сделать URL-адреса относительно вашего URL-адреса:

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

Таким образом, вы можете перемещать файлы без необходимости реорганизации их в будущем.

Ответ 4

Чтобы создать модульные таблицы стилей, которые не зависят от абсолютного местоположения ресурса, авторы могут использовать относительные URI. Относительные URI (как определено в [RFC3986]) разрешены для полных URI с использованием базового URI. RFC 3986, раздел 5, определяет нормативный алгоритм для этого процесса. Для таблиц стилей CSS базовый URI - это таблица стилей, а не исходный документ.

Например, предположим следующее правило:

body { background: url("yellow") }

находится в таблице стилей, обозначенной URI:

http://www.example.org/style/basic.css

Фон исходного документа BODY будет выгравирован любым изображением, описанным ресурсом, обозначенным URI

http://www.example.org/style/yellow

Пользовательские агенты могут различаться в том, как они обрабатывают недопустимые URI или URI, которые обозначают недоступные или неприменимые ресурсы.

Взято из спецификация CSS 2.1.

Ответ 6

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

Обрабатываемый путь запроса для минимизированного пакета должен быть "/originalcssfolder/minifiedbundlename" не только "minifiedbundlename".

Другими словами, укажите, что ваши пакеты имеют одинаковый путь (с/) в качестве исходной структуры папок, таким образом любые внешние ресурсы, такие как шрифты, изображения, будут отображаться для исправления URI браузером. Альтернативой является использование абсолютного url (refs в вашем css, но это обычно не желательно).

Ответ 7

Попробуйте использовать:

body {
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);
}

Images является папкой, в которой отображается изображение, которое вы хотите опубликовать.