web-dev-qa-db-ja.com

CSS URLで相対/絶対パスを使用する方法は？

実動サーバーと開発サーバーがあります。問題はディレクトリ構造です。

開発：

  • 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を含めるにはどうすればよいですか？相対パスで使用できるトリックはありますか？

cssrelative-pathabsolute-path
78
danidacar

URLは CSSファイルの場所に関連 であるため、これはあなたのために動作するはずです：

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

相対URLは2つのフォルダーに戻り、次にimagesフォルダーに戻ります-構造が同じである限り、両方の場合に機能するはずです。

http://www.w3.org/TR/REC-CSS1/#url から：

部分的なURLは、ドキュメントではなくスタイルシートのソースを基準にして解釈されます

115
Kobi

個人的には、これを.htaccessファイルで修正します。あなたはそれにアクセスできるはずです。

CSS URLを次のように定義します。

url(/image_dir/image.png);

.htacessファイルに次を入力します。

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

または

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

サイトによって異なります。

7
Garison Piatt

私は同じ問題を抱えていました... CSSを公開したいたびに..検索/置換をしなければなりませんでした。相対パスはdevとプロダクションで異なっていたため、相対パスは私にとっては機能しませんでした。

最後に検索/置換を行うのにうんざりし、動的なCSSを作成しました（たとえばwww.mysite.com/css.php）それは同じですが、今ではCSSでPHP定数を使用できました。何かのような

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

開発サーバーの元の形式を失うことなく、YUIコンプレッサーを使用して圧縮できるようになったため、動的にすることは悪い考えではありません。

幸運を！

2
pleasedontbelong