背景位置の割合の原則_html/css_WEB-ITnose

今日、他の人がコードを調整するのを手伝っていたときに、次のスタイルを見つけました:

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

背景サイズの場合: 100% auto、これは、背景画像の幅が要素の幅 * 100% と高さであることを意味します。比例的に拡大縮小されます。詳細については、css3 背景を参照してください。

background-position の場合、パーセンテージは親要素の幅に基づいて計算されると考えるのが自然ですが、background-position は実際にはそうではなく、独自の一連の原則があります。以下に詳しくご紹介します。

1. 等価な書き方

色々なチュートリアルを見ると以下のような等価な書き方があります:

左上、左上は0% 0%に相当します。

上、中央上、中央上は50% 0に相当します。 % .

右上、右上は 100% 0% に相当します。

左、左中央、左中央は 0% 50% に相当します。

中央、中央中央は 50% 50% に相当します。

右、右中央、中央右は 100% 50% に相当します。

左下、左下は 0% 100% に相当します。

下、中央下、中央下は 50% 100% に相当します。

下右、右下は 100% 100% に相当します。

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

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

background-postion:x y;x：{容器(container)的宽度?背景图片的宽度}*x百分比，超出的部分隐藏。y：{容器(container)的高度?背景图片的高度}*y百分比，超出的部分隐藏。

この式を使用すると、百パーセントの記述方法が理解しやすく、また、上記のさまざまな等価な記述方法も、少しの計算で簡単に理解できます。

3. 例

1. 背景位置: center center は、background-position: 50% と同等です 50% は、background-position:?px ?px と同等です

例で使用する背景画像は次のとおりです [サイズ: 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 パーセント = (300px-200px)*50%=50px;

Set 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>

エフェクトも中央に配置されます。