CSS の背景関連のプロパティ

background-origin: 背景位置プロパティがコンテナのどの部分を基準にして配置されるかを指定します。

パディングボックスの背景画像はパディングボックスを基準に配置されます; (デフォルト)

ボーダーボックスの背景画像は境界ボックスを基準に配置されます;

コンテンツボックスの背景画像はコンテンツボックスを基準に配置されます。

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

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

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

一方の値のみが設定されている場合、もう一方の値は「中心に配置」されます（50%/中心）

パーセンテージが使用されている場合、座標は次のように計算されます:

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

つまり、左/上は0％に相当し、右/下は100％に相当し（背景画像の右/下端がコンテナと一致します）、中央は50％に相当します（背景画像はコンテナ内にあります）。コンテナの真ん中）。

background-size:背景画像のサイズを設定します(IE8はこの属性をサポートしていません)

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

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

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

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

IE8互換:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='absolute path',sizingMethod='scale/crop');

crop: 背景画像のサイズは変更されず、画像はエリアサイズに合わせてカットされます。

画像：デフォルト値。背景画像のサイズに合わせて領域のサイズ境界を拡大または縮小します。これはオーバーフローの効果と同等です: 表示されます。

スケール: 領域のサイズ境界に合わせて背景画像をスケールします。

①任意のサイズの背景パーセンテージを指定できない②単一の画像にのみ適しており、画像スプライトなどのパズルは使用できません③絶対パス画像を参照する必要があります④ie7、8に対応

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