背景画像の全画面効果を実現するCSS

インターフェース全体に背景画像を持たせたい場合は、本文に背景を追加するのが自然な考え方です。コードは次のとおりです。本文の高さが 0 であることが判明したため、画像を表示できません。解決策は、HTML の幅と高さを 100% に設定して、本文に値があり、背景画像が画面全体を完全に埋めることです。 。

(推奨チュートリアル:

CSS チュートリアル

)拡張知識:

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

no-repeat—画像は繰り返しません;

center 0px—center はページの左側からの位置、0px はページの上部からの位置です;

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

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

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

推奨される関連ビデオ チュートリアル:

css ビデオ チュートリアル

以上が背景画像の全画面効果を実現するCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。