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

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

Развитие:

• 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свойства? Есть ли уловка, которую я могу использовать с относительными путями?

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

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

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

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

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

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

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

url(/image_dir/image.png);

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

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

или

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

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

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

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

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

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

Удачи!