background-position

6830 ワード
CSS テキストリンク

background-position


The **background-position** CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin .
バックグラウンド位置の説明.
値0にpxは加算されません.
  • 参考問題:https://ko.javascript.info/task/drag-heroes2
    • <html>

<head>
    <style>
        .hero {
            background: url(https://js.cx/drag-heroes/heroes.png);
            width: 130px;
            height: 128px;
        }

        .hero2 {
            background: url(https://js.cx/drag-heroes/heroes.png);
        }

        #superhero {
            background-position: 0 -128px;     
        }   

        #hulk {
            background-position: -250px 0;     
        }   

    </style>
</head>

<body>
    <div class="hero">

    </div>

    <img src="https://js.cx/drag-heroes/heroes.png">

    <div id="superhero" class="hero">

    </div>

    <div id="hulk" class="hero">

    </div>
</body>

</html>
    基本的にurl"https://js.cx/drag-heroes/heroes.png"リンクでロードすると、複数のヒーローが存在する写真が抽出されます.これをdivコンテナのバックグラウンド(バックグラウンド)に設定し、ヒーロー1人だけが露出できるコンテナのサイズ(width,height)をランダムに設定します.
    background-position: 0 -128px; この方法でX軸Y軸を調整するとdiv容器は静止していますが、写真だけが後ろに移動するので、各容器に複数のヒーローを置くことができます.
    divは開いています写真のフレームワークに想像します.(img展開技術)
    Background-X軸Y軸の背景画像を位置に移動できます.
    (もちろん、Backgroundを設定する必要があります.)
    Width:130、height:128でフレームと背景画像を設定します.
    そこでイメージを動かすのは「ヒーロー」だけのパターン
    一つ一つ
    にこにこ
    最終的には、各ヒーローにはdivフレームワークがあり、単独で使用することができます.
    バックアップ1038[削減|python]
    Roller 4のExceptionを学ぶ