背景画像の伸縮と塗りつぶしを実現するCSS

まず、背景画像には 2 種類あることがわかります:

(推奨学習: css クイック スタート)

1. 領域のサイズと正確に一致するサイズの大きな画像全体;

2. 非常に小さなバー画像を繰り返すと、非常に規則的な大きな画像の背景が形成されます。

では、背景画像の引き伸ばしと塗りつぶしを実現するにはどうすればよいでしょうか?

方法は次のとおりです:

背景画像のサイズ (数値表現):

コードは次のとおりです:

#background-size{
background-size:200px 100px;
}

背景画像のサイズ (パーセント)表現):

コードは次のとおりです:

#background-size2{
background-size:30% 60%;
}

背景画像のサイズ (要素を埋めるために画像を比例的に拡大します。つまり、カバー値):

コードは次のとおりです:

#background-size3{
background-size:cover;
}

背景画像のサイズ (要素のサイズ、つまり含まれる値に合わせて画像を比例的に縮小します):

コードは次のとおりです:

#background-size4{
background-size:contain;
}

背景画像のサイズ (要素を画像自体のサイズ、つまり自動値で埋める):

コードは次のとおりです:

#background-size5{
background-size:auto;
}

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