背景関連プロパティの詳細な紹介

background-origin: background-position attribute がコンテナのどの部分を基準にして配置されるかを指定します。

padding-box Background-imageはPaddingboxを基準に配置されます; (デフォルト)

border-box 背景画像はボーダーボックスの背景を基準に配置されます。 image コンテンツ ボックスを基準にして配置されます。

background-position: コンテナに表示される背景画像の開始位置を設定します。

デフォルト値: 0 0 (背景画像の左上点から表示);

値: Int px Int px; 背景画像の左上の固定点はコンテナの座標位置にあり、負の値。負の値は、背景画像の左上の点がコンテナ内になく、その先の部分が非表示になることを意味します。

一方の値のみが設定されている場合、もう一方の値は「中央揃え」になります（50%/中央）

パーセントを使用する場合、座標は次のように計算されます:

x: (コンテナの幅 - コンテナの幅背景

写真

)*x パーセント、余分な部分は非表示; y: (コンテナの高さ - 背景画像の高さ)*y パーセント、余分な部分は非表示になります。 つまり、

left

/topは0%に相当し、right/bottomは100%に相当し(背景画像の右/下端がコンテナと一致する)、centerは50に相当します。 % (コンテナ中央の背景画像)。

background-size

: 背景画像のサイズを設定します (IE8 はこの属性をサポートしていません) パーセント/長さ: パーセントの場合、背景画像のサイズはコンテナーとパーセントの積になります。 。 1 つだけを設定し、2 つ目は自動に設定します (元の背景画像と同じアスペクト比を維持するため)。

両方とも100%に設定すると、背景画像がコンテナ内を埋め尽くしますが、アスペクト比が変わります。

Contain: コンテナには、背景画像の固定比率に従って背景画像全体が含まれます。背景画像のサイズは、いずれかの側がコンテナの境界に達するまで、背景画像の固定比率に従って拡大され、多くの場合、もう一方の側は空白になります (リピートがない場合)。

cover: 背景画像は、コンテナ全体を満たすまで固定アスペクト比に従って拡大されます（背景画像の短い辺もコンテナ境界に達します）。背景画像がコンテナを超えてしまうため、一部が切れてしまいます。

IE8互換:

filter: progid:DXImageTrans

for

m.Microsoft.AlphaImageLoader(src='absolute path',sizingMethod='scale/crop'); crop: 背景画像のサイズは変更されません。画像は領域サイズに合わせて切り取られます。

画像：デフォルト値。背景画像のサイズに合わせて領域のサイズ境界を拡大または縮小します。これは

オーバーフロー

の効果と同等です: 表示されます。 スケール: 領域のサイズ境界に合わせて背景画像をスケールします。

①サイズの背景パーセンテージは指定できない ②単一の画像にのみ適しており、画像スプライトや他のパズルは使用できません ③

絶対パス画像を

引用する必要があります ④ie7,8に対応しています 上記はすべて個人的な理解です。間違いがあれば、歓迎します。修正のためにメッセージを残してください。

以上が背景関連プロパティの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。