CSS の画像パスの問題に関する議論 (同じパッケージ/異なるパッケージ)

CSS ファイルでは、背景を使用する、つまり背景画像を追加する必要がある場合があります。これは通常、ボタンスタイルを作成するときに使用されます。

CSS で背景画像を追加する方法は、画像と CSS ファイルの相対的な位置に応じて次の種類に分けられます。
1. 同じパッケージ内: background: url(aaa.gif);
2. さまざまなパッケージ:
この場合、設定方法は 2 つあります。1 つは絶対パス、つまり upload/2022/web/www.iteye.com を使用することですが、これは一般的には推奨されておらず、プロジェクトの移行にも役立ちません。もう 1 つは相対パスを使用することです。まず、画像ファイルと CSS ファイルに共通のルートディレクトリを見つけてから、画像のサブディレクトリを追加する必要があります。例:
CSS ファイルの場所: WebRoot/test/css/a.css
画像ファイルの場所: WebRoot/platform/resource/images/icons/a.gif
共通のルートディレクトリを見つけたい場合は、「../」を使用する必要があります。このパスは親ディレクトリを意味します。親ディレクトリが 2 つある場合は、「../../」になります。この記述方法によると、a.css の背景画像 css は次のように記述する必要があります。

コードをコピー

コードは次のとおりです。

背景:url(../../platform/resource/images/icons/a.gif)

なぜ？

まず、これら 2 つのファイルの場所を確認し、共通のルートディレクトリが WebRoot であることを確認します。
まず、a.css の場所で WebRoot を見つけると、「../../」になります。次に、結合された画像のサブディレクトリのパスは「platform/resource/images/icons/a.gif」になります。これらを組み合わせると、上記の結果になります。

<<: HTML スタイルタグと関連する CSS リファレンスの詳細な説明

>>: docker-compose.yml ファイル内の一般的なテンプレートコマンドの詳細な説明