файлу - якорь html




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

Определяя что-то вроде 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

Для создания модульных таблиц стилей, которые не зависят от абсолютного местоположения ресурса, авторы могут использовать относительные 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 .


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

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

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


Согласно W3 :

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

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

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


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

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

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


Это сработало для меня. добавив две точки и косую черту.

body{
    background: url(../images/yourimage.png);
}





css