CSS ファイルがサブディレクトリにある場合に、CSS 背景宣言で画像ファイルを参照する方法

CSS での背景画像パスの確立

この記事では、CSS 背景宣言で画像ファイルを参照する方法を検討します。

コンテキスト

開発者は、背景画像が要素に適用されないという問題に遭遇しました。 CSS ファイルはディレクトリ Project/Web/Support/Styles/file.css にあり、画像はディレクトリ Project/Web/images/image.png にありました。

失敗した試行

開発者はいくつかのパスのバリエーションを試みましたが失敗しました:

background-image: url(/images/image.png);
background-image: url('/images/image.png');
background-image: url("images/image.png");
background-image: url(../images/image.png);
background-image: url('../images/image.png');
background-image: url("..images/image.png");

解決策

解決策は、CSS ファイルの場所のコンテキストを考慮することにあります。この場合、CSS ファイルは画像ファイルより 2 レベル深くなります。したがって、画像を正しく参照するには、パスでディレクトリ構造の 2 レベル上のトラバースを表す「..」の 2 つのインスタンスを使用する必要があります。

background-image: url('../../images/image.png');

これで、背景画像が期待どおりに適用されます。 Web ページ。

以上がCSS ファイルがサブディレクトリにある場合に、CSS 背景宣言で画像ファイルを参照する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。