CSSで画面全体に背景画像を設定する方法

CSS で背景画像を全画面に設定する方法: [background-size: cover;] などの、background-size 属性を使用できます。属性値 cover は、背景画像が十分な大きさに拡大されることを示します。

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

CSSには背景画像のサイズを設定する属性background-sizeがあり、この属性を使用して背景画像の高さと幅を設定できます。同時に、背景画像を必要なサイズに拡大するために使用することもできます。

構文:

background-size: length|percentage|cover|contain;

属性値:

• length 背景画像の高さと幅を設定します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ設定されている場合、2 番目の値は「auto」に設定されます。

• percentage 背景画像の幅と高さを親要素のパーセンテージとして設定します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ設定されている場合、2 番目の値は「auto」に設定されます。

• cover 背景画像が背景領域を完全に覆うように、背景画像を十分な大きさに拡大します。背景画像の一部が背景アンカー領域に表示されない場合があります。

• contain 画像の幅と高さがコンテンツ領域に完全に収まるように、画像を最大サイズまで拡大します。

(学習ビデオ共有:

css ビデオ チュートリアル)

CSS で背景画像を全画面に設定する方法:

関連する推奨事項:

CSS チュートリアル

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