1

背景画像のプロパティを操作しようとしていました。xとyの繰り返しで本当に混乱しました。私はそれが何をするのか理解しようとしましたが、オンラインで十分ではないことがわかりました。2 つの列を作成しました。左の列は 63%、右の列は 37% (概算) になります。幅 3000 ピクセル、高さ 160 ピクセルの背景画像を使用し、2 つの列に 2 つの異なる色を使用しました。つまり、1890px または 63% の後、色が変わります。

1350px ワイド画面のラップトップを使用しています。repeat-y のパーセンテージを変更し続け、それが何をしているかを確認しました。何が起こっているのか、まだわかりません。これは私が理解したことです。間違っている場合は、もっと簡単な説明をお願いします。私にとって、repeat y を 44% に設定すると、現在のコンテナーの 44% (たとえば Z PX) を使用し、z PX から画像の終わりまで (私の場合は 3000px) で背景画像を設定します。プロセスを垂直に繰り返します。私がはっきりしていることを願っています。私は正しいですか？あなたの考えを教えてください、またはあなた自身の方法で私に説明してください. ありがとう！

#page{

        background:url("bg.jpg") repeat-y 63%;

    }
    .clear{
       clear:both;
    }
    div.left{
        width:63.11111111%;
        float:left;



    }
    div.right{
        float:right;
        width:36%;

    }

 }

    </style>
</head>
<body>
    <div id="page">

        <div class="left">
            this is left column
        </div>
        <div class="right">
            this is right column
        </div>
    <div class="clear"></div>   
    </div>

</body>

4

1 に答える 1

1

background-repeat プロパティと background-position プロパティは 2 つの異なるものです。background-repeat プロパティは、背景画像を繰り返すかどうか、またはどのように繰り返すかを設定します。デフォルトでは、背景画像は垂直方向 (= repeat-y) と水平方向 (= repeat-x) の両方で繰り返されます。

あなたの例では、画像は垂直方向に繰り返されます。しかし、あなたが使用している div は、それについてあまり表示されません。これは、画像が div よりもはるかに大きいためです。25x25px などの小さい画像で試してみて、テキスト (lorem ipsum など) を入れるか、高さを 200 px にして、値をもう一度試してみることをお勧めします。

background-position プロパティは、背景画像の開始位置を設定します。最初の値は水平位置で、2 番目の値は垂直位置です。

あなたの例では、パーセンテージは、水平軸上で開始する画像から離れたポイントを表しています。

あなたが行ったように、キーワードを 1 つだけ指定すると、縦軸のもう 1 つの値は "center" になります。したがって、画像は縦軸の中央から見ることができます。

私の提案を試してみてください！機能していないように見える場合は、例をオンラインに掲載します。お知らせ下さい。

PS: 列に指定された色はありません。

于 2013-08-06T06:00:13.720 に答える