如何在HTML + CSS中重新创建eBay新标识页面

Question

我对一个网站有一个好主意,我认为eBay为它的新标识创建的页面非常有趣.我只是想知道是否有人能给我任何有关如何重新创建它的见解.

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

我有点认为,通过间隙可以看到的徽标被设置为主要的bg,固定而前部只是滚过它.

两个主要问题:

• 他们如何获得填充页面的'前'div
• 当你向下滚动页面时,他们如何让bg改变.

谢谢!

Answer 1

它实际上非常简单.它们具有应用于多个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 }

请在此处查看此代码:http://jsfiddle.net/CAMEn/