Как использовать относительные/абсолютные пути в 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.css в css, которая использует на обоих серверах один и тот же путь для свойства background: url? Есть ли трюк, который я могу использовать с относительными путями?

Ответы

Ответ 1

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

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

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

Из http://www.w3.org/TR/REC-CSS1/#url:

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

Ответ 2

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

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

url(/image_dir/image.png);

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

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

или

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

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

Ответ 3

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

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

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

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

Удачи!