CSS 内の相対パスは CSS ファイル自体に対して相対的なものですか?

CSS 相対パス: 参照点を理解する

CSS では、相対パスを使用して画像などの外部リソースを参照するのが実用的なアプローチになる可能性があります。ただし、これらのパスがどこに相対しているのかを理解することが重要です。

CSS ファイル内の相対パスは CSS ファイルを基準にしていますか?

答えは明確です。はい。 CSS 内の相対パスは、CSS ファイル自体の場所を基準にして解決されます。これは、画像またはその他の外部リソースの相対パスを指定すると、ブラウザは CSS ファイルと同じフォルダーからファイルを検索することを意味します。

Example

次のシナリオを考えてみましょう:

• ページ: page.htm (場所: 場所は関係ありません)
• CSS: /resources/css/styles.css
• 画像: /resources/images/image.jpg

styles.css 内の次の CSS コードは、相対パスを使用して画像を参照します。

div { background-image: url('../images/image.jpg'); }

この例では、相対パス "../images/image.jpg" は次のことを意味します:

• 1 つ上のディレクトリ レベルに移動します (パス内の ".." で示されます)
• 「」を入力します「images」ディレクトリ
• ファイル「image.jpg」を検索します

ブラウザは、styles.css の場所 (「/resources/css/」) を基準としたこの相対パスを解釈します。 "、"/resources/images/image.jpg" で画像が正常に見つかりました。

以上がCSS 内の相対パスは CSS ファイル自体に対して相対的なものですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。