6

私はウェブサイトの素晴らしいアイデアを思いつきました。eBay が新しいロゴのために作成したページは非常に興味深いと思います。誰かがそれを再現する方法について何か洞察を与えることができるかどうか疑問に思っています.

http://pages.ebay.com/announcements/new/index.html

隙間から見えるロゴがメインの背景に設定されていて、固定されていて、フロントセクションがスクロールするだけであることがわかります。

2 つの主な質問:

  • ページを埋めるために「フロント」divを取得するにはどうすればよいですか
  • ページを下にスクロールすると、背景がどのように変化しますか。

ありがとう！

4

3 に答える 3

6

それは実際には非常に簡単です。section複数の要素に適用される複数の背景画像がありfixed background-attachment、背景が常に同じ位置にあるように適用されています。その結果、背景に対するマスクとして機能する要素が得られます。

効果を簡単に再現できるので、次のコードで実装を理解できます。

HTML

<div></div>
<div class="ebay-img1"></div>
<div></div>
<div class="ebay-img2"></div>
<div></div>
<div class="ebay-img3"></div>

CSS

div { height: 600px; background-attachment:fixed; border-bottom: 1px solid black; }
.ebay-img1 { background: black url("http://pics.ebaystatic.com/aw/pics/announcements/new/logo/logo-1.png") no-repeat 50% 0 fixed }
.ebay-img2 { background: black url("http://pics.ebaystatic.com/aw/pics/announcements/new/logo/logo-2.png") no-repeat 50% 0 fixed }
.ebay-img3 { background: black url("http://pics.ebaystatic.com/aw/pics/announcements/new/logo/logo-3.png") no-repeat 50% 0 fixed }

このコードの in situ については、こちらを参照してください: http://jsfiddle.net/CAMEn/

于 2012-09-27T12:31:23.133 に答える
2

「背景」は、実際に<section>は実際のコンテンツアイテムの間に挿入されるいくつかのタグです。それがページの背景であるという錯覚はbackground-attachment: fixed;、背景要素のスタイルを指定することによって実現されます。

于 2012-09-27T12:27:16.563 に答える
0

CSS ソースでは、変化する背景と div の塗りつぶしを処理しています。非表示ではないので、自由に見てダウンロードして遊ぶことができます :)

于 2012-09-27T12:24:34.627 に答える