Есть ли способ установить каталог по умолчанию для изображений, используемых в CSS? - PullRequest
Новая
       3

Есть ли способ установить каталог по умолчанию для изображений, используемых в CSS?

4 голосов
/ 29 апреля 2011

У меня есть файл css, который для организационных целей находится в другом каталоге, в котором находятся изображения. Дело в том, что я всегда настраиваю все фоновые изображения следующим образом: background-image: url(../img/Untitled.jpg). Есть что-то вроде HTML-тега <base>, который можно использовать в css, поэтому мне не нужно помещать этот "../img/" в каждый background-image?

Ответы [ 5 ]

1 голос
/ 29 апреля 2011

Перезапись URL - это ваш друг.

Ссылки на изображения CSS всегда относятся к URL-адресу файла CSS. Давайте предположим, что наши CSS-файлы находятся внутри /css, и что мы хотим, чтобы наши ресурсы изображений находились внутри /img, и что нам надоело ставить ../img/ перед каждой ссылкой на изображение.

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

  • /css/foobar.png
  • /css/blue-theme/header-background.png

, поэтому они относительно желаемого местоположения (/img):

  • /img/foobar.png
  • /img/blue-theme/header-background.png

Et вуаля ! Проблема решена.

Вы можете сделать это с помощью mod_rewrite в Apache. Это должно быть примерно так же просто, как добавить следующее к соответствующему .htaccess. 

Options +FollowSymlinks
RewriteEngine On
RewriteRule ^css/(([^/]+/)*)([^/\.]+\.(gif|jpg|jpeg|png))$ img/$1$3

Сложнее в IIS, но понятие остается тем же.

1 голос
/ 29 апреля 2011

Другой вариант , возможный , - создание стилей с использованием или другого серверного языка.Затем вы можете использовать переменную каталога, чтобы указать полный путь для каждого элемента.

styles.php 

<?php
    header("Content-Type: text/css");
    $imageDir='../images';
    // or
    // $imageDir='/newsletter/2010/jan/17/business/category/7/img';
?>

.divClass{
    background : url('<?php echo $imageDir; ?>/kitten.jpg');
}
1 голос
/ 29 апреля 2011

Нет, боюсь, вы застряли с этим синтаксисом.

РЕДАКТИРОВАТЬ: Вы можете проверить http://lesscss.org/. С переменными вы могли бы по крайней мере определить все URL в верхней части.

0 голосов
/ 29 апреля 2011

Одна вещь, которую вы можете сделать, это не идти вверх и снова с относительными путями, вы всегда можете спуститься из корня домена. Этот URL будет выглядеть как url(/img/Untitled.jpg) и будет одинаковым во всех файлах CSS независимо от того, насколько глубоко они вложены в домен.

0 голосов
/ 29 апреля 2011

На самом деле нет решения, если только CSS не находится в том же каталоге, что и изображения.

, но, как вы говорите в вопросе, это не так, поэтому единственный способ показать, гдеизображения - это дать относительное местоположение для каждого background-image или статического изображения (с http://...)

...