Путь к изображению в CSS

Я использую некоторую структуру CSS и пытаюсь показать значок (используя селектор классов со свойством background-image). Допустим, моя файловая структура:

Content / site.css
Content / Folder1  / framework.css
Content / Folder1  / Folder2       / framework-images.css
Content / Folder1  / Folder2       / framework-icon1.png

site.css выглядит так:

@include "Folder1/framework.css";
...

framework.css например:

@include "Folder2/framework-images.css";
...

framework-images.css:

.selector {
    background-image: url("icon1.png");
}

Но когда я пытаюсь добавить в свой класс html-element "селектор", инструменты разработчика Firefox показывают мне, что он пытается загрузить значок отсюда:

http://localhost:1234/Content/~/Content/Folder1/Folder2/icon.png

а правильный путь (я прав?):

~/Content/Folder1/Folder2/icon.png

или просто

http://localhost:1234/Content/Folder1/Folder2/icon.png

Так где же может быть ошибка? Как указать клиенту использовать правильный путь?

P.S. Если это важно, я использую без точки (меньше css). Другими словами, все .css на самом деле .less.

P.P.S. Это приложение ASP.NET MVC4.

Обновление. Как отметил @djfarrelly, проблема заключалась в неправильном пути в background-image: url (...). Я изменил его на:

background-image: url("/Content/Folder1/Folder2/Icon1.png");

и он начал работать. Но я все еще в замешательстве. Может ли кто-нибудь объяснить, почему он не работает без указания полного пути?


css asp.net background-image less asp.net-mvc-4
person Illia Ratkevych    schedule 14.12.2012    source источник
comment
Не возражаете ли вы опубликовать строку, в которой вы назначаете класс, неясно, как символ ~ попал туда (css может быть правильным, а проблема связана с другим).   -  person Ulises    schedule 14.12.2012
comment
@Ulises Я почти уверен, что это часть магии LESS: он генерирует для вас URL, включая тильду. Сгенерированный URL-адрес на самом деле указывает не на то место или вас просто беспокоит его внешний вид?   -  person cimmanon    schedule 14.12.2012
comment
Спасибо за пояснение, я не был знаком с LESS   -  person Ulises    schedule 14.12.2012
comment
Я полагаю, что причина не в LESS, потому что, насколько я знаю, ~ / Content / - это материал MVC4. Я почти уверен, что он похож на ../../Content/ для ASP.NET MVC3.   -  person Illia Ratkevych    schedule 14.12.2012

Ответы (1)


arrow_upward
4
arrow_downward

Все ваши ссылки на изображения должны быть связаны с корневой папкой на вашем веб-сайте, чтобы избежать путаницы. Вы пытались изменить свой css на ссылку из корня:

.selector {
    background-image: url("/Content/Folder1/Folder2/icon1.png");
}

Если вы включите /, это должно очистить его.

РЕДАКТИРОВАТЬ: Я изначально разместил это с ../ вместо правильного / для ссылки на корневую папку.

person djfarrelly    schedule 14.12.2012
comment
Я думал, что URL-адрес фонового изображения должен быть связан с файлом css. Я попытался указать путь, как вы упомянули, но dev.tools указал localhost: 4883 / Content / ~ / Content / Folder1 / Folder2 / icon1.png. После этого я попробовал url (/ Content / ...) без .. при запуске - и он работает. Спасибо, что указали на причину проблемы. - person Illia Ratkevych; 15.12.2012
comment
Да, я тоже думал об этом, но не нашел никаких доказательств. У тебя? - person Illia Ratkevych; 15.12.2012