Как установить CSS-URL в абсолютное местоположение? - PullRequest
Новая
       13

Как установить CSS-URL в абсолютное местоположение?

9 голосов
/ 15 ноября 2010

Я работаю над мобильным приложением HTML5, и у меня изначально фон элемента DIV установлен через CSS следующим образом: 

background-image: url('images/ClanSpider.png');

В моем приложении есть метод, который меняет фонDIV на основе выбора, сделанного в выпадающем списке из предыдущего метода с использованием jQuery: 

function ResetMyHonor()
{       
   ClanImage = 'images/Clan' + MyClanName + '.png';
   $("#MyClanName").html(MyClanName); 
   $("#MyHonorBox").css('backgroundImage', 'url(' + ClanImage + ')');
}

Все это прекрасно работает, когда я нахожусь в корне своей страницы.Тем не менее, у меня есть некоторые ссылки в приложении, использующие хеш-теги для навигации по странице (например, #MyHonor).Когда я перешел к одному из этих тегов и вызвал функцию сброса выше, изображение обрывается.Когда я открываю Chrome Inspector, чтобы посмотреть на тег DIV, он говорит, что загружаемое изображение - это «images / MyHonor / ClanSpider.png», которого не существует.

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

Могу ли я переписать то, что получается при обработке URL-адреса, или альтернативный способ задания фонового изображения DIV без какой-либо обработки на стороне сервера?В идеале это приложение будет работать через функцию кеширования манифеста HTML5, поэтому у меня не будет доступа ни к каким языкам на сервере.

Ответы [ 5 ]

7 голосов
/ 15 ноября 2010

Прочитав ваши комментарии к другим ответам, я думаю, что вы создаете для себя проблему, которой на самом деле не существует.Если url('/images/ClanSpider.png') будет работать при загрузке на веб-сервер, то хитрость заключается в том, чтобы заставить его работать точно так же при локальной работе.Безусловно, самый простой способ сделать это, особенно если ваше внимание сосредоточено на автономном приложении, которое не удовлетворяет требованиям серверной части (что я предполагаю, верно, как вы упомянули file:/// URI), - это запустить локальныйвеб-сервер.

Python поставляется с модулем SimpleHTTPServer, если у вас установлен Python , то запустить его так же просто, как перейти в каталог проекта L5RHonor в командной строке и выполнить командуследующая команда: 

python -m SimpleHTTPServer

Тогда вместо доступа к вашим файлам с URI вот так: 

file:///H:/Projects/L5RHonor/images/ClanSpider.png

Вы получите к ним доступ так: 

http://localhost:8000/images/ClanSpider.png

Всеваши корневые относительные пути к файлам теперь будут работать правильно, в качестве дополнительного бонуса автономное кэширование будет работать правильно в Chrome, и вы сможете увидеть из журнала в окне командной строки, что он запрашивает и кэширует правильные файлы в соответствии с вашими требованиями.манифест.

6 голосов
/ 15 ноября 2010

Попробуйте поставить начальную косую черту на этих путях для представления корня.

, то есть используйте: 

url('/images/ClanSpider.png')

вместо 

url('images/ClanSpider.png')
4 голосов
/ 15 ноября 2010

Самым простым решением, очевидно, является добавление косой черты в URL, чтобы сделать его абсолютным. Это будет хорошо работать, но это делает невозможным перемещение приложения в подкаталог или перемещение статических ресурсов на другой сервер. Если это проблема, существуют различные альтернативные способы.

Если число возможных фоновых изображений конечно, вы можете определить каждое в своем классе: 

.bgSpider { background-image: url('images/ClanSpider.png'); }
.bgFalcon { background-image: url('images/ClanFalcon.png'); } 
...

, а затем выполните .addClass(), чтобы установить правильное изображение.

Кроме этого, насколько мне известно, нет способа указать путь относительно таблицы стилей (а не текущего документа) при настройке пути фонового изображения в Javascript. Вам придется работать с абсолютными путями или определить корневой путь в JavaScript, и использовать это: 

// in the script head
imageRoot  = "http://www.example.com/mysite/images";
// later....
$("#MyHonorBox").css('backgroundImage', 'url(' + imageRoot + ClanImage + ')');
1 голос
/ 15 ноября 2010

Расположение файла CSS не имеет значения, вы изменяете свойство .style элемента HTML. Это то же самое, что и использование атрибута стиля .

Поскольку это CSS, встроенный в документ, все URI относятся к документу .

Возможно, вы захотите начать URL с /, или если вы действительно хотите указать абсолютное местоположение, указанное в вашем вопросе: http://

0 голосов
/ 15 ноября 2010

Попробуйте добавить / в начале URL?

...