CSS初心者向けチュートリアル: 背景画像を画面全体に表示する

インターフェース全体に背景画像を表示したい場合は、当然 body に背景を追加することを考えます。コードは次のとおりです。

体 {
     幅: 100%;
     高さ: 100%;
    /* 背景画像を読み込む */
    背景: url("../static/images/index/backImg.jpg") 繰り返しなし;
    /* 背景画像は垂直方向と水平方向に中央揃えされます*/
    背景の位置: 中央 中央;
    /* コンテンツの高さが画像の高さより大きい場合、背景画像はビューポートに対して固定されます*/
    背景添付: 固定;
    /* 背景画像をコンテナのサイズに応じて拡大縮小します*/
    背景サイズ: カバー;
    /* 背景色を設定します。背景色は背景画像の読み込み処理中に表示されます*/
  背景色: rgba(41, 50, 39, 1);
}

本文の高さが 0 であるため、画像を表示できないことがわかりました。解決策は、HTML の幅と高さを 100% に設定して、本文に値を設定し、背景画像が画面全体を完全に埋め尽くすことです。

拡張機能

url(images/beijing.png)——画像パスの場所です。

no-repeat——画像は繰り返されません。

center 0px - center はページの左側から配置され、0px はページの上から配置されます。

background-position: center 0—画像の位置です。上記と同じです。

background-size: cover; — 背景領域を完全に覆うように背景画像を大きく拡大します。背景画像の一部は背景配置領域に表示されない場合があります。

min-height: 100vh;——ウィンドウの高さ。「ビューポート」とは、ブラウザ内の表示領域のサイズ、つまり window.innerWidth/window.innerHeight を指します。

要約する

以上がこの記事の全内容です。この記事の内容が皆様の勉強や仕事に何らかの参考学習価値をもたらすことを願います。123WORDPRESS.COM をご愛顧いただき、誠にありがとうございます。