[CSSチュートリアル】background-positionプロパティのパーセンテージ値の使い方を探る

background-positionが背景画像の表示に与える影響について

ホームページの画像を交換するプロジェクトで、これらの2日間は、問題を発見し、以前のスタイルは、ページが縮小または拡大されたときに背景画像の表示領域も変更され、現在は左上、どのようにページの画像位置のサイズが移動されていない変更に設定されている背景-位置：センター、。この思考だけでなく、ああ、背景-位置：センターは、背景画像を表示する要素の中心からではない、なぜか、地域のすべての要素の完全な？センターは、背景画像や要素の中心を指しますか？

background-position プロパティ

background-positionは、背景画像の開始位置を設定するセットプロパティで、background-position-xとbackground-position-yがあります。設定可能な値はleft, right, top, bottomの他、固定ピクセル値やパーセント値もあります。

• background-position-x: 左 (0%に相当)
• background-position-x: right (100%に相当)
• background-position-y: top (0%に等しい)
• background-position-x: bottom (100%に等しい)

ピクセル値による固定配置はさておき、今回は主にパーセント値による背景画像位置の影響を探ってみます。パーセント値は通常、要素の幅と高さに対する相対的な割合であるべきですが、実際にはそうではありません。

パーセント値に設定した場合の実際の状況

注：今回、背景要素のコンテナとして使用される要素は、幅と高さが100%、100%に設定され、ボーダーやパディングはありません
例1.

background-size: 100px 100px;
background-position: 100% 100%;

ご覧のように、background-positionを100%に設定すると、背景画像が要素領域の外にはみ出さず、ウィンドウの右下に表示されるようになります
次に、位置を変更します。
例2．

background-size: 100px 100px;
background-position: 50% 50%;

ご覧の通り、背景画像は要素の中央に配置されました。中央配置を確認するために、中央配置のスタイルを持つ子要素を比較に使いましたが、子要素にぴったりと縁取られていることが分かります。

上の2つの例でおわかりのように :

background-position が 100% に設定されている場合、画像は右下隅にあるため、background-position-x のピクセル値は「コンテナ要素の幅から背景画像の幅を引いた値」に、background-position-y のピクセル値は「コンテナ要素の高さから背景画像の高さを引いた値」に相当します。 value minus the height of background image" となります。

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

コンテナ要素の幅をw、コンテナ要素の高さをh、背景画像の幅をbw、背景画像の高さをbhとすると、上記の2つの例から以下の式が導かれる。

background-position-x: percent = (w - bw) * percent
background-position-y: percent = (h - bh) * percent

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

padding: 100px 20px 50px 50px;
background-position: 0% 0%;

背景画像はパディング領域の左上にあることがわかります。したがって、background-position のパーセント値は、実際にはコンテナ要素の幅と高さ = content + padding の計算に関与しています。
背景画像サイズ background-size が100% 100% に設定されている場合、設定されたパーセンテージに関わらず background-position はオフセットされません。

逆に、背景画像のサイズが要素サイズより大きい場合、パーセントを設定した後に起こることは、負のオフセットになります。
さて、これでようやくこのプロパティがわかったわけですが、ある種のcssプロパティの説明は正確さに欠け、誤解を招きやすい、あるいは自分で練習しないと本物にならない！ということです。

background-positionプロパティのパーセント値の使い方についての記事は以上ですが、background-positionのパーセント値についての詳細は、スクリプトハウスの過去記事を検索するか、引き続き以下の記事を閲覧してください。