background-positionプロパティでのパーセンテージ値の使用法の検討

背景位置が背景画像の表示に与える影響

この2日間のプロジェクトでホームページの写真を入れ替えていたところ、問題が見つかりました。以前のスタイル設定はbackground-position: centerでした。ページが縮小または拡大されると、背景画像が表示される領域も変更されました。これを左上に変更した後、ページサイズがどう変わっても画像の位置は変わりません。これは意味が分かりません。background-position:center は背景画像を要素の中央に表示すべきではないでしょうか? なぜ背景画像が要素領域全体を占有するのでしょうか?この中心は背景画像の中心を指すのでしょうか、それとも要素の中心を指すのでしょうか?

背景位置プロパティ

background-position は、背景画像の開始位置 (background-position-x と background-position-y) を設定するコレクション プロパティです。使用可能な値は、左、右、上、下、および固定ピクセル値とパーセンテージ値です。

• background-position-x: 左 (0% に相当)
• background-position-x: 右 (100% に相当)
• background-position-y: 上（0%に相当）
• background-position-x: 下（100%に相当）

固定ピクセル値の配置はさておき、今回は主にパーセンテージ値が背景画像の位置に与える影響について探っていきます。通常、パーセンテージ値は要素の幅と高さに対するパーセンテージであるべきですが、実際のパフォーマンスはそうではありません。

実際の状況をパーセンテージ値として設定

注: 背景要素コンテナとして使用される要素の幅と高さは100%、100%に設定されており、境界線とパディングはありません。
例1:

背景サイズ: 100px 100px;
背景位置: 100% 100%;

background-position を 100% に設定すると、背景画像が要素領域から溢れることなく、ウィンドウの右下隅に表示されることがわかります。次に、位置を変更します。例 2:

背景サイズ: 100px 100px;
背景位置: 50% 50%;

背景画像が要素の中央に配置されていることがわかります。中央にあることを証明するために、比較のために中央揃えスタイルの子要素を使用しました。子要素によってフレームされていることがわかります。

上記の 2 つの例から、次のことがわかります。

background-position を 100% 100% に設定すると、画像は右下隅にあります。このとき、background-position-x のピクセル値は「コンテナ要素の幅から背景画像の幅を引いた値」に等しく、background-position-y のピクセル値は「コンテナ要素の高さから背景画像の高さを引いた値」に等しくなります。

background-position を 50% 50% に設定すると、画像は要素の中央に配置されます。このとき、background-position-x のピクセル値は「コンテナ要素の幅に 50% を掛けて背景画像の幅の 50% を引いた値」に等しく、background-position-y のピクセル値は「コンテナ要素の高さに 50% を掛けて背景画像の高さの 50% を引いた値」に等しくなります。

w がコンテナ要素の幅、h がコンテナ要素の高さ、bw が背景画像の幅、bh が背景画像の高さを表す場合、上記の 2 つの例から次の数式が生成されます。

背景位置x: パーセント = (幅 - 幅) * パーセント
背景位置 y: パーセント = (h - bh) * パーセント

要素にパディングがある場合:

パディング: 100px 20px 50px 50px;
背景位置: 0% 0%;

背景画像がパディング領域の左上隅にあることがわかります。そのため、background-positionのパーセンテージは、コンテナ要素の幅と高さの計算に実際に関与します = コンテンツ + パディング
background-size が 100% 100% に設定されている場合、background-position は、設定されているパーセンテージに関係なくシフトしません。

逆に、背景画像のサイズが要素のサイズより大きい場合は、パーセンテージを設定すると負のオフセットが発生します。
よし、これでようやくこのプロパティが理解できました。一部の CSS プロパティの説明は正確ではなく、誤解を招く可能性があります。実践を通じてのみ、真の知識を得ることができます。

これで、background-positionプロパティでのパーセンテージ値の使用法についての説明は終わりです。background-positionのパーセンテージ値に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。