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 ファイル内の一般的なテンプレート コマンドの詳細な説明
推薦する
Linux yum パッケージ管理方法
導入yum (Yellow dog Updater, Modified) は、Fedora、RedH...
JS の 6 つの継承方法とその長所と短所
目次序文プロトタイプチェーン継承コンストラクタの継承組み合わせ継承（プロトタイプチェーン継承とコンス...
Vue は Tencent Map を統合して API を実装します (デモ付き)
目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...
js におけるイベントバブリングとイベントキャプチャの簡単な分析
目次01-イベントバブリング1.1- イベントバブリングの概要1.2-イベントバブリングの利用（イベ...
Vue 手書き読み込みアニメーション プロジェクト
ページが応答しない場合、白い画面が表示されないように、読み込みアニメーションを表示するのがユーザーフ...
ウェブページのコメントにより IE でテキストがオーバーフローする
実験コードは次のとおりです。 </head> <body> <div ...
Tomcat イメージをインストールして Docker に Web プロジェクトをデプロイする方法を簡単に説明します。
1. Tomcatをインストールする1. Docker HubでTomcatイメージを見つける d...
vsFTP 3.0.3 のコンパイルとインストールの詳細な分析
脆弱性の詳細VSFTP は、GPL に基づいてリリースされた Unix ライクなシステムで使用される...
中国語でのNginx設定パラメータの詳細な説明（負荷分散とリバースプロキシ）
PS: 最近、nginx を詳細に紹介している <<High-Performance ...
HTML+CSS+JSはナビゲーションバーのスクロールグラデーション効果を実現します
目次まず効果を見てみましょう:成し遂げる：要約:まず効果を見てみましょう: 成し遂げる： 1. ナビ...
リンクAの意味論、書き方、ベストプラクティス
リンク A のセマンティクス、ライティング スタイル、およびベスト プラクティス。私は JavaEy...
MySQL でのテーブルの作成と削除の詳細な例
テーブル作成コマンドには以下が必要です。 テーブルの名前フィールド名各フィールドを定義します（タイ...
Elementはスクリプトを使用して新しいコンポーネントを自動的に構築します
目次背景element-ui の自動構築はどのように機能しますか?メイクファイル新しい.jsファイル...
WindowsでMysql5.7.17のインストールと起動に失敗する問題を解決する
マシンに初めて MySQL をインストールします。オペレーティングシステムはwin7ですmysqlの...
MySQL フルテキスト インデックス、ジョイント インデックス、Like クエリ、JSON クエリのうち、どれが高速ですか?
目次クエリの背景1. クエリをいいね2. JSON関数クエリ3. 共同インデックスクエリ4. 全文イ...