CSS background-image-正しい使い方は何ですか？

CSS background-imageプロパティの正しい使い方は何ですか？私が理解しようとしている重要なことは

1. 引用符で囲む必要がありますか？ background-image: url('images/slides/background.jpg');
2. （上記のように）相対パスにすることはできますか、それとも完全なURLにする必要がありますか？
3. 標準に準拠したブラウザで正しく動作することを確認するために知っておくべきその他の点。

パスは完全パスでも相対パスでもかまいません（もちろん、イメージが別のドメインのものである場合は、完全パスでなければなりません）。

URIで引用符を使用する必要はありません。構文は次のいずれかです。

background-image: url(image.jpg);

または

background-image: url("image.jpg");

ただし、W3から：

括弧、空白文字、一重引用符（ '）、二重引用符（ "）など、引用符で囲まれていないURIに表示される一部の文字は、結果のURI値がURIトークンになるように円記号でエスケープする必要があります：' \（ '、 '\）'。

したがって、このようなインスタンスでは、引用符または二重引用符を使用するか、文字をエスケープする必要があります。

1. いいえ、引用符は必要ありません。

2. はい、できます。ただし、相対URLはスタイルシートのURLから解決されることに注意してください。

3. 引用符は使わない方がよい。理解できないクライアントもいると思います。

1）引用符を付けることは良い習慣です

2）たとえば、相対パスにすることができます。

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

cssのロード元のフォルダーで画像フォルダーを探します。したがって、画像が別のフォルダにあるか、CSSフォルダツリーの外にある場合は、絶対パスまたはルートパスへの相対パス（/で始まる）を使用する必要があります。

3）background-imageの完全な宣言を使用して、次のような標準に準拠したブラウザー全体で一貫して動作するようにする必要があります。

background:blue url('/images/clouds.jpg') no-repeat scroll left center;

相対パスで問題なく、引用符は必要ありません。役立つもう1つの方法は、「shorthand」backgroundプロパティを使用して、画像が読み込まれないか、何らかの理由で使用できない場合に備えて、背景色を指定することです。

#elementID {
    background: #000 url(images/slides/background.jpg) repeat-x top left;
}

また、画像を繰り返すかどうかとその方向（指定しない場合、デフォルトは水平方向と垂直方向に繰り返す）を指定できること、およびコンテナーに対する画像の位置も指定できることに注意してください。

画像がcssファイルの別のディレクトリにあり、相対パスをWebサイトのルートから開始する場合：

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

cssフォルダーとcssフォルダーの外側にimagesフォルダーがあると仮定して、正確に画像があるディレクトリ構造を確認するだけで、 "../ images / image.jpg"を使用する必要があります。ディレクトリ構造。

あなたがCSSファイルの画像を使用しているとすれば、引用符は本当に必要ありません

{background-image: url(your image.png/jpg etc);}

引用符を使用する必要はなく、好きなパスを使用できます！

background-imageとURIについては、それぞれのサイトポイントのリファレンスページをご覧ください。

1. 引用符で囲む必要はありませんが、必要に応じて使用できます。（IE5 / Macは単一引用符をサポートしていないと思います）。
2. 相対と絶対の両方が可能です。相対パスは、cssファイルのパスを基準にしています。

以下のようにCSSファイルに書き込むだけです

background:url("images/logo.jpg")