今日、他の人がコードを調整するのを手伝っていたときに、次のスタイルを見つけました:
background-position: 50% 0;background-size: 100% auto;
背景サイズの場合: 100% auto、これは、背景画像の幅が要素の幅 * 100% と高さであることを意味します。比例的に拡大縮小されます。詳細については、css3 背景を参照してください。
background-position の場合、パーセンテージは親要素の幅に基づいて計算されると考えるのが自然ですが、background-position は実際にはそうではなく、独自の一連の原則があります。以下に詳しくご紹介します。
1. 等価な書き方色々なチュートリアルを見ると以下のような等価な書き方があります:
それでは、なぜ左と上が 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>
エフェクトも中央に配置されます。