Как использовать относительные / абсолютные пути в URL-адресах css?

86

У меня есть сервер производства и разработки. Проблема в структуре каталогов.

Развитие:

  • http://dev.com/subdir/images/image.jpg
  • http://dev.com/subdir/resources/css/style.css

Производство:

  • http://live.com/images/image.jpg
  • http://live.com/resources/css/style.css

Как я могу создать папку style.cssin, cssкоторая использует на обоих серверах один и тот же путь для background: urlсвойства? Есть ли уловка, которую я могу использовать с относительными путями?

наскар
источник

Ответы:

129

URL-адрес относится к местоположению файла CSS , поэтому это должно сработать для вас:

url('../../images/image.jpg')

Относительный URL-адрес идет на две папки назад, а затем в imagesпапку - он должен работать в обоих случаях, если структура одинакова.

С https://www.w3.org/TR/CSS1/#url :

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

Коби
источник
будет ли это работать, если мне придется вернуться на 2 шага назад (обновить ответ) url (../../ images / image.jpg)?
nascar
@anothershrubery - извините, мой первый пример был ошибочным
nascar
@danip - должно работать, но от вас нет двух шагов http://domain.com/css/style.css. Я не уверен, что там можно сделать ... РЕДАКТИРОВАТЬ: - да, он должен работать с обновленной структурой, я обновил ответ ( ../кажется, просто еще один ).
Коби
9

Лично я бы исправил это в файле .htaccess. У вас должен быть к этому доступ.

Определите свой URL-адрес CSS как таковой:

url(/image_dir/image.png);

В вашем файле .htacess поместите:

Options +FollowSymLinks
RewriteEngine On
RewriteRule ^image_dir/(.*) subdir/images/$1

или

RewriteRule ^image_dir/(.*) images/$1

в зависимости от сайта.

Гарисон Пиатт
источник
2

У меня была такая же проблема ... каждый раз, когда я хотел опубликовать свой css ... Мне приходилось выполнять поиск / замену ... и относительный путь не работал для меня, потому что относительные пути были разными от разработчика к производству.

В конце концов, мне надоело выполнять поиск / замену, и я создал динамический CSS (например, www.mysite.com/css.php), он тот же, но теперь я мог использовать свои константы php в CSS. что-то вроде

.icon{
  background-image:url('<?php echo BASE_IMAGE;?>icon.png');
}

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

Удачи!

доволен
источник
13
На вопрос нет phpметки! OP может вообще не использовать php.
Bazzz
6
это всего лишь пример .. вы можете использовать php, asp, jsp .. идея та же
приятно не будет
6
он также может быть статическим.
jcuenod
3
Также, если это находится в файле CSS, то оно не <?php **** ?>будет обработано
JD