3

ここで見られる背景効果をエミュレートすることに興味があります: (リンク)。基本的にはコンテンツが上にスクロールする静的な背景ですが、ページの「ウィンドウ」セクションごとに異なる背景があります。下記参照:

ここに画像の説明を入力

さらに下にスクロールします。

ここに画像の説明を入力

私の最初の考えは、各「ウィンドウ画像」が互いに垂直に積み重ねられた1つの巨大な静的背景を作成し、その上に透明な背景を持つdivを作成することでしたが、これは間違っているようです.

この効果を再現するにはどうすればよいですか?

4

3 に答える 3

4

一般に:

  1. トップバーに CSS ポジショニングを使用するfixed(前述のとおり)
  2. フォアグラウンド コンテナーをz-indexバックグラウンド コンテナーよりも大きくします
  3. opacityに設定して、特定のセクションの背景を「非表示」にします。0

背景画像と前景コンテナの幅を試して、うまくいくようにしてください。幸運を!

于 2013-05-10T01:59:20.717 に答える
1

コピーしようとしているテーマの森でそのプレミアムを購入してみませんか。Web には、これを説明するパララックス スクロールのチュートリアルが多数あります。

于 2013-05-10T04:01:57.367 に答える
0

fixedCSS ポジショニングを使用して、トップ バーの効果を得ることができます。次に、ページの残りの部分では、 CSS ポジショニングdivを使用して、トップ バーの高さだけ下にシフトするある種のカプセル化を使用します。relative次に、さまざまなページセクションに対して、次々に積み重ねられ、異なる背景を持つdivを作成します。

CSS ポジショニングに関するリンク

于 2013-05-10T01:53:54.307 に答える