cssの背景画像が表示されていない：パス、要素セレクター、デバッグスキル

この記事の目的は、CSSの背景画像が表示されない一般的な問題を解決することを目的としています。正しい設定画像パスの設定方法、ボディ要素とHTML要素間の背景設定の違い、および画像ファイル自体の整合性チェックを強調することを目的としています。プロのガイドとコードの例を通じて、開発者がCSSの背景設定で一般的な落とし穴を理解し、回避し、背景画像を正しくロードして表示できることを確認し、Webページの視覚効果を改善するのに役立ちます。

1。CSSの背景画像設定の基本を理解します

Web開発では、CSSを使用して要素に背景画像を追加することが一般的な要件です。これは通常、バックグラウンドイメージプロパティを通じて達成され、画像リソースへのパスはurl（）関数と組み合わせて指定されます。

 selector {
    背景イメージ：url（ 'path/to/your/image.jpg'）;
    /*バックグラウンドサイズ、バックグラウンドリピートなど、その他のバックグラウンド関連属性。*/
}

その中で、URL（）関数内のパスがキーです。この画像をどこで見つけるかをブラウザに伝えます。パスは、相対的なパスまたは絶対的なパスである可能性があります。

2。相対パスの正しい使用

相対パスは、CSSファイルの独自の場所に対して解析されます。これを理解することは、パスエラーを回避するために不可欠です。

• ./ ：現在のディレクトリを示します。たとえば、画像がCSSファイルと同じディレクトリにある場合、パスはURL（ './ image.png'）になります。
• ../ ：以前のディレクトリを表します。 CSSファイルがCSS/style.cssで、画像が画像/img_1.pngにある場合、CSSと画像フォルダーが同じ親ディレクトリにある場合、style.cssのimg_1.pngを参照する正しいパスはurl（ '../ images/img_1.png'）です。

例：プロジェクト構造が次のとおりであるとします。

プロジェクト/
├├） index.html
├├。。CSS/
│└│。-style.css
└└）/
    └└） img_1.png

style.cssでIMG_1.pngを参照する正しい方法は次のとおりです。

 / * style.css */
体 {
    背景イメージ：url（ "../ image/img_1.png"）; /* CSSディレクトリからリトリートしてから、画像ディレクトリを入力します*/
}

注：

• ケースに敏感：一部のサーバー（Linuxなど）では、ファイルパスと名前はケースに敏感です。 CSSで参照されているパスが実際のファイル名とまったく同じであることを確認してください。
• パス検証：ブラウザ内の画像パスに直接アクセスできます（たとえば、http：//yourdomain.com/images/img_1.png）。パスが正しいかどうかを確認し、画像に直接アクセスできることを確認できます。

3.適切なHTML要素を選択します：body vs HTML

ページ全体の背景画像を設定するとき、開発者はしばしば、背景イメージをHTML要素またはボディ要素に適用すべきかどうか疑問に思うことがよくあります。

• HTML要素：ドキュメント全体のルート要素を表します。
• ボディ要素：すべての可視ページコンテンツが含まれています。

通常、背景画像をボディ要素に適用することは、ページの可視コンテンツ領域をよりよく表すため、より一般的な練習です。ボディ要素の高さがビューポート全体を埋めるのに十分ではない場合、背景がHTMLに適用されている場合、背景はビューポート全体をカバーします。身体に適用すると、背景は体の含有量の端までのみ表示されます。背景画像がページ全体をカバーすることを確認するために、コンテンツの量に関係なく、通常はボディスタイルとHTMLスタイルと組み合わせて使用されるか、ボディを設定して100％高くすることを確認します。

推奨されるプラクティス：

 / * style.css */
体 {
    背景イメージ：url（ "../ image/img_1.png"）;
    バックグラウンドサイズ：カバー; /*画像が要素全体を覆うことを確認します*/
    バックグラウンドリピート：ノーリピート。 /*画像の複製を防ぐ*/
    バックグラウンドポジション：センターセンター。 /*写真は中央にあります*/
    MIN-HEIGHT：100VH; /*体が少なくともビューポートの高さ全体を占めることを確認してください*/
    マージン：0; /*ボディのデフォルトマージンを削除*/
    パディング：0; /*ボディのデフォルトマージンを削除*/
}

/*オプション：必要に応じて、HTMLとボディの両方が高さ全体を占めることを確認してください*/
html、body {
    高さ：100％;
}

身体要素に背景画像を適用し、最小高さを組み合わせます：100VH（ビューポートの高さの100％）は、特にコンテンツが少ない場合、背景画像がページに完全に記入できない問題を効果的に解決できます。

4.画像ファイル自体を確認します

CSSパスと要素セレクターに加えて、背景画像が表示しない問題をトラブルシューティングする場合、画像ファイル自体の整合性も重要です。

• 破損した画像：画像ファイルが破損したり不完全である可能性があり、ブラウザがロードされたり正しくレンダリングされたりしません。画像ビューアーで画像を開いてみるか、別のイメージの交換でテストしてみてください。
• ファイルサイズ：画像ファイルのサイズが異常かどうかを確認します。ファイルが小さすぎると、画像データが不完全な場合があります。
• ファイル形式：画像が一般的なWeb形式（.png、.jpg、.gif、.webp、.svgなど）であることを確認してください。

5。FAQのデバッグとトラブルシューティング

背景画像がまだ表示されていない場合、ブラウザ開発者ツールを使用して、詳細なトラブルシューティングを実行できます。

• 要素スタイルを確認する：ブラウザ内のページを右クリックし、「要素を検査する」を選択し、対応するHTML要素（ボディなど）を見つけ、「スタイル」パネルを確認し、背景イメージ属性が正しく適用されていることを確認し、URL（）パスが正しく表示されているかどうかを確認します。
• ネットワークリクエスト： 「ネットワーク」パネルに切り替えて、ページを更新します。画像ファイルの読み込み要求を見つけて、そのステータスコードを確認します。
  • 200 OK：イメージが正常にロードされたことを意味します。
  • 404見つかりません：イメージパスが間違っているか、ファイルが存在しないことを意味します。
  • 403禁止：サーバーが画像へのアクセスを拒否することを意味します（許可の問題）。
  • その他のエラー：サーバーの構成またはネットワークの問題を指している可能性があります。
• コンソールエラー：リソースロード障害、COR（クロスドメインリソース共有）の問題など、エラーメッセージについてはコンソールパネルを確認してください。
• ブラウザキャッシュ：ブラウザが古いCSSまたは画像リソースをキャッシュすることがあります。開発者ツールで「キャッシュを無効にする」をチェックした後、ブラウザキャッシュをクリアするか、ページを更新してください。
• CSSの優先順位：他のCSSルールが背景イメージ設定を上書きしないようにしてください。テストは、！

要約します

CSSの背景画像を表示しないという問題を解決することは、通常、次のコアポイントを中心に展開します。

1. 画像パスの相対性を確認します。パスは、HTMLファイルではなく、CSSファイル自体に関連しています。
2. 正しいHTML要素を選択します。フル画面の背景については、ボディ要素に背景イメージを適用し、その高さがビューポート全体をカバーしていることを確認します。
3. 画像ファイルの整合性を確認する：画像ファイル自体が破損していないことを確認してください。
4. ブラウザ開発者ツールの使用：要素のスタイル、ネットワークリクエスト、およびコンソールエラーのチェックは、問題を効率的に見つけるための鍵です。

これらのベストプラクティスとデバッグステップに従って、ほとんどのCSS背景画像表示の問題を効果的に解決します。

以上がcssの背景画像が表示されていない：パス、要素セレクター、デバッグスキルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。