[CSSチュートリアル】背景-位置の割合の原則の説明

今日、ある人のコードを手伝っているときに、次のようなスタイルを見かけました。

background-position: 50% 0;
background-size: 100% auto.

background-size:100% autoの場合、背景画像の幅は要素の幅*100%、高さは均等に拡大縮小されることを意味します。詳細は css3 背景 .

background-positionは、親要素の幅を基準に算出されるパーセンテージと考えるのが自然ですが、実際はそうではありません。これは独自の原則を持っています。詳しくは後述します。

I. 等価な文章

様々なチュートリアルを見ていると、以下のような等価書き込みがあります。

• top left, left top は 0% 0%に相当します。
• top, top center, center top は、50% 0% に相当します。
• right top, top rightは100% 0%に相当します。
• 左、左中央、左中央は0％50％に相当します。
• center, center は 50% 50% に等しい。
• right, right center, center right は 100% 50% に等しい。
• 左下、左下は0％100％に相当します。
• bottom, bottom center, center bottomは50% 100%に相当します。
• 右下、右下は100％100％に相当します。

では、なぜleft,topは0％0％となり、right bottomは100％100％となるのでしょうか？

次に、background-positionの割合の計算式です。

background-postion:x y;
x: {container's width - background-image's width}*x percentage, the excess is hidden.
y: {height of container - height of background-image} * y percentage, the excess is hidden.

この式で、パーセントの書き方を理解するのは簡単だし、それを外挿することで、上記の様々な種類の等価値の書き方を理解するのも簡単だ。

III. 例題

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

この例では、以下の背景画像[size: 200px*200px]を使用しています。

背景画像はコンテナの中央に表示されます。

<style type="text/css">
.wrap{
    width: 300px;
    height: 300px;
    border:1px solid green;
    background-image: url(img/image.png);
    background-repeat: no-repeat;
/* background-position: 50% 50%;*/
    background-position: center center;
}
</style>
<div class="wrap">
</div>

背景画像を中央に配置することで効果を発揮します

上記のように、パーセントとキーワードを設定することで背景画像を中央に配置することができますが、特定の値で画像を中央に配置したい場合、どの程度設定すればよいのでしょうか。

上記の計算式にしたがってください。

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

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

つまり background-postion:50px 50px;

テストするために

<style type="text/css">
.wrap{
    width: 300px;
    height: 300px;
    border:1px solid green;
    background-image: url(img/image.png);
    background-repeat: no-repeat;
/* background-position: 50% 50%;*/
/* background-position: center center;*/
    background-position: 50px 50px;
}
</style>
<div class="wrap">
</div>

効果も同様に中央に配置されています。

以上、background-positionのパーセンテージについて解説しました。background-positionパーセントの詳細については、スクリプトハウスの過去の記事を検索するか、以下の記事を引き続きご覧ください。