2

私は次のコードを持っており、以下に示す概要のようなものを実現したいと考えています。divの上に画像が表示され、ユーザーが垂直方向にスクロールすると、他の画像が繰り返し表示されます。

ただし、stayontop.pngが垂直方向に終了する場所にrepeat.pngを正確に表示したいと思います。どうすればこれを達成できますか？さまざまbackground-position:center top, center bottom;なバリエーションを試しましたが、うまくいきませんでした。

編集：背景画像の高さがautoモードになっているため（background-size:100% auto, 100% auto !important;）残念ながら、静的な高さの参照に基づくソリューションはbackground-position:center 50px;、1つのdiv幅では正常に機能しますが、ユーザーがdivのサイズを変更すると失敗します。（実際には、別のユーザーが解像度の異なる携帯電話でサイトにアクセスしたとき。）とにかく動的に設定することはできますか？

！-+-+-+-+-+-+-

stayontop.png

！-+-+-+-+-+-+-

repat.png

！-+-+-+-+-+-+-

repat.png

！-+-+-+-+-+-+-

repat.png

！-+-+-+-+-+-+-

....。

.hede{
    background: url("css/images/stayontop.png"), url("css/images/repeat.png");
    background-repeat:no-repeat, repeat-y;
    background-position:center top, center bottom;
    background-attachment: scroll, scroll;
    background-size:100% auto, 100% auto !important;
    min-height:100%;
}
4

4 に答える 4

1

ステイオントップ画像の高さが繰り返し画像の高さと同じ（または2x、3x、4xの高さ）で、両方が上に揃えられていることを確認する必要があると思います。

また、サイトにアクセスするブラウザが複数の背景画像をサポートしていることを確認する必要があります。

クロスブラウザに準拠するには、2つのHTML要素を使用することをお勧めします。

于 2012-07-30T21:58:46.910 に答える
1

上記の答えはおそらく最良の解決策ですが、別の簡単なアイデアを投げ込むだけです 。http://jsfiddle.net/wigster/8FMB7/1/ 正確にこの形式で使用することはありませんが、 2つの背景を上下に配置すると、目的の分割が作成されます。

于 2012-07-30T22:08:50.120 に答える
1

ブラウザの互換性のために、私はこの順序で何かを試します：

   .hede{
        background: url("css/images/repeat.png");
        background-repeat:repeat-y;
        background-position:center top;
        background-size:100% auto;
        min-height:100%;
        margin-top: 20px; // assumed height of stayontop.png
    }
    .hede:before {
        content: url("css/images/stayontop.png");
        height: 20px; 
        margin-top: -20px;
    }

コードを少し調整する必要があるかもしれませんが、それは可能であるはずです...

編集：： before cssをこれに変更すると、サイズ変更の問題が解決する場合があります。

.hede:before {
  content: url("css/images/stayontop.png");
  height: 20px;
  display: block;
  margin: -20px auto 0; 
}

完全にはわかりませんが、試してみる価値はあります...

于 2012-07-30T22:09:35.360 に答える
1

背景位置プロパティは、、、、およびだけtopでなく、長さの値を受け入れます。したがって、stayontop.pngが終了するピクセルで指定するだけです。centerbottom

background-position: center 200px;

ウィンドウのサイズが変更されるたびに、JavaScriptで背景の位置を設定します。

http://jsfiddle.net/gilly3/rKD8M/

onresize = resetBackgrounds;
function resetBackgrounds() {
    var els = document.querySelectorAll(".hede");
    for (var i = 0; i < els.length; i++) {
        var h = els[i].clientWidth * aspectRatio;  // must define aspectRatio
        els[i].style.backgroundPosition = "center top, center " + h + "px";
    }
}
于 2012-07-30T22:11:00.677 に答える