4

以前にCSSでこの種の問題に遭遇した人はいますか?

幅 100% に設定されたヘッダーがあり、左側 (幅 500px) に画像があります。残りのスペースを水平方向に塗りつぶしたい背景画像がありますが、画像がある場所ではありません。したがって、background-position: 500px 0;ブラウザの左側から 500px の距離で背景が始まると設定し、推定します。しかし、そうではありません。これは、repeat-property を に設定した場合にのみ機能します。解決策を見つけるのに 1.5 時間費やしましたが、うまくいきませんでした。最終的には、ヘッダーに a を追加し、画像に負の 500px のマージン左をbackground-repeat: no-repeat;追加することでこれを解決しました。margin-left: 500px;ここで何か不足していますか？背景に x 座標 500 から水平方向にタイリングを開始するように指示できないのはなぜですか?

4

3 に答える 3

6

ここで何かが足りませんか？x座標500から水平方向にタイリングを開始するように背景を指示できないのはなぜですか？

background-position右または下に繰り返す背景の原点を設定しません。背景全体をそれぞれx軸とy軸に沿って特定の距離だけシフトします。

軸に沿って繰り返す背景を指定すると、常にその軸に沿って両方向に無限に並べて表示されます（つまり、水平軸に沿って左右、垂直軸に沿って上下に並べられます）。CSSの背景プロパティを使用してこれを変更することはできません。

于 2012-03-11T18:10:11.077 に答える
1

BoltClockの回答に加えて、内部にdivを配置して背景にすることでこれをシミュレートできます

html:

<div id="repeater">
    <div id="repeater-offset"></div> 
</div>

CSS:

#repeater {
    background-image:url('http://lorempixel.com/400/200');
    background-position: 100px 0;
    height: 300px;
    width: 300px;
    border: 1px solid #000;
}

#repeater-offset {
    background-color:#fff;
    position:relative;
    width:100px;
    height:100%;
}

フィドルを参照してください: http://jsfiddle.net/NmxrK/1/

于 2012-03-11T18:22:50.057 に答える
0

左の画像の横にあるヘッダー内に 2 つ目の div を作成します。float: right や絶対配置と margin-left: 500px; など、さまざまな方法でこれを実現できます。この 2 番目の div で繰り返し背景を設定し、高さと幅が 100% であることを確認します。スクロールバーが表示されないように、ヘッダーに overflow:hidden を設定することもできます。

于 2012-03-11T18:17:33.243 に答える