背景位置パーセンテージ原則の詳細な説明

今日、誰かがコードを調整するのを手伝っていたとき、次のようなスタイルを見つけました。

背景位置: 50% 0;
背景サイズ: 100% 自動;

background-size:100% auto の場合、背景画像の幅は要素の幅 * 100% になり、高さは比例して拡大縮小されます。詳細については、css3 の背景を参照してください。

background-position のパーセンテージは親要素の幅に基づいて計算されると考えるのが自然ですが、background-position は実際にはそうではありません。独自の原則があります。以下に詳しい紹介をさせていただきます。

1. 同等の書き方

さまざまなチュートリアルを読んでみると、次のような同等の書き方があります。

• 左上、左上は 0% 0% に相当します。
• top、top center、center top は 50% 0% に相当します。
• 右上、右上は 100% 0% に相当します。
• left、left center、center left は 0% 50% に相当します。
• center、center centerは50% 50%に相当します。
• 右、右中央、中央右は 100% 50% に相当します。
• 左下、左下は 0% 100% に相当します。
• 下、下中央、中央下は 50% 100% に相当します。
• 右下、右下は 100% 100% に相当します。

では、なぜ左上が 0% 0% に相当し、右下が 100% 100% に相当するのでしょうか?

2. 背景位置パーセンテージ計算式

背景位置:xy;
x: {コンテナの幅 - 背景画像の幅}*x パーセンテージ、余分な部分は非表示になります。
y: {コンテナの高さ - 背景画像の高さ}*y パーセンテージ、余分な部分は非表示になります。

この式により、100% の書き方が分かりやすくなり、また、上で述べた各種の同等の書き方も計算で分かりやすくなります。

3. 例

1. background-position:center centerはbackground-position:50%と同等です。50%はbackground-position:?px ?pxと同等です。

例で使用されている背景画像は次のとおりです[サイズ: 200px*200px]。

背景画像はコンテナ内の中央に配置されます。

<スタイル タイプ="text/css">
。包む{
    幅: 300ピクセル;
    高さ: 300px;
    border:1px 緑一色;
    背景画像: url(img/image.png);
    背景繰り返し: 繰り返しなし;
/* 背景位置: 50% 50%;*/
    背景の位置: 中央 中央;
}
</スタイル>
<div class="wrap">
</div>

背景画像を中央に配置する効果があります

前述の通り、パーセンテージとキーワードを設定することで背景画像を中央に配置することができます。特定の値を設定して画像を中央に配置したい場合は、何を設定すればよいでしょうか？

上記の式によれば、

x=(コンテナの幅-背景画像の幅)*x パーセンテージ=(300px-200px)*50%=50px;

y=(コンテナの高さ-背景画像の高さ)*yパーセンテージ=(300px-200px)*50%=50px;

つまり、 background-postion:50px 50px;を設定します。

テストしてみましょう:

<スタイル タイプ="text/css">
。包む{
    幅: 300ピクセル;
    高さ: 300px;
    border:1px 緑一色;
    背景画像: url(img/image.png);
    背景繰り返し: 繰り返しなし;
/* 背景位置: 50% 50%;*/
/* 背景位置: 中央 中央;*/
    背景の位置: 50px 50px;
}
</スタイル>
<div class="wrap">
</div>

効果も中心にあります。

背景位置パーセンテージの原則についての詳しい説明はこれで終わりです。背景位置パーセンテージに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。