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

WBOY
リリース: 2016-06-24 11:42:03
オリジナル
1194 人が閲覧しました

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

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>
    ログイン後にコピー

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

    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート