9

久しぶりにこのページを見ました。本当にすごい。しかし、スクロール時に発生する背景画像の効果がどのように機能するかわかりません。コードを調べたところ、Jquery と多数のスクロール プラグインを使用していることがわかりましたが、表示できる画像については何もありません。

それが完了したとどのように言えますか？

サイト: http://herohousing.org/UBBT/

4

2 に答える 2

11

このトリックは非常に単純で、各パネルの背景画像が固定されている CSS が必要なだけです。

<style type="text/css">
    div {
        height: 100%;
        background-image: url(http://sstatic.net/so/img/logo.png);
        background-attachment: fixed;
        border: thin solid;
    }
    div.a {
        background-repeat: repeat-x;
        background-color: #FDD;
    }
    div.b {
        background-repeat: repeat-y;
        background-color: #DFD;
    }
    div.c {
        background-repeat: no-repeat;
        background-color: #DDF;
    }
</style>

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

ここでは同じ背景画像を使用していますが、背景色と画像の繰り返しが異なるため、3 つの異なる要素であることがわかります。

編集    OK、私が書いていることに疑問を持っている人もいるようです。実際、引用されたサイトではこれに jQuery を使用しています。ただし、背景画像のサイズをまだ変更できないため、画像をブラウザーのビューポートの幅と高さに合わせるだけです。CSS 3 はbackground-sizeプロパティを-khtml-指定しますが、そのサポートは、(Konqueror)、-moz-(Firefox のような Gecko ベースのブラウザー)、-o-(Opera)、-webkit-(Safari のような WebKit ベースのブラウザー) などのベンダー固有のプレフィックスを使用する独自のものです。

それを差し控えることができる場合は、私が示した CSS テクニックを使用できます。

于 2010-03-10T18:36:10.287 に答える
2

それぞれに異なる背景画像を持つ4つのdivであり、この効果を特にうまく機能させるのは、「background-attached：fixed;」です。背景のスクロールを停止するプロパティ。

Firefox用のFirebugをダウンロードすると、divを調べて、CSSがページをどのように動作させるかを観察し、自分で複製を試みることができます。

私が認めなければならない本当に見栄えの良い効果:-)

于 2010-03-10T18:37:19.320 に答える