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

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 ファイル内の一般的なテンプレート コマンドの詳細な説明

推薦する

MySQL トリガーの使用シナリオとメソッドの例

トリガー:トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...

ログインと登録機能を実現するjs

この記事の例では、ログインと登録機能を実装するためのjsの具体的なコードを参考までに共有しています。...

Tomcat で静的リソースを処理するチュートリアル

序文Tomcat 内のすべてのリクエストは Servlet によって処理され、静的リソースも例外では...

HTML リスト タグ dl、ul、ol の使用例

コードをコピーコードは次のとおりです。 <!--リストタグ: <dl>: 階層リス...

Dockerはjenkins+mavenコード構築および展開プラットフォームを構築します

目次Docker の基本概念Docker インストール プロセス (Centos6.9)カーネルのア...

CentOS7 インストール Zabbix 4.0 チュートリアル (イラストとテキスト)

SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...

Windows での Apache+Tomcat7 負荷分散構成方法の詳細な説明

準備Windows Server 2008 R2 Enterprise (2.40GH、8GB、64...

JavaScriptスコープについての簡単な説明

目次1. 範囲1. グローバルな範囲2. ローカルスコープ2. 変数のスコープ1. グローバル変数2...

JavaScript でピンボール ゲームの Web バージョンを実装する

参考までに、JavaScriptのオブジェクトとメソッドを使用して実装されたWebピンボールゲームを...

Vue はクリックフリップ効果を実現します

参考までに、vueを使用してクリックフリップエフェクトを簡単に実装します。具体的な内容は次のとおりで...

JS の new 関数の詳細な説明

目次1. 例2. 兵士100人を作成する3. 質問4. 改善点5. エレガント? 6. JSの父から...

MySQLクエリ条件におけるonとwhereの配置の違いの分析

導入今日SQLを書いているときに、問題が発生しました。要件は、データを照会し、スコアと過去 1 週間...

Ubuntu Linux に Git と GitHub をインストールして使用する

Git 入門Git は、Linux(R) カーネル開発の管理を支援するために 2005 年に Lin...

Vueは、選択した月に応じて日付に対応する曜日を動的に表示します。

私たち謙虚なプログラマーは、今でもこう歌わなければなりません。「あなたも私も、この世に生まれて、一日...