6

我有一个很棒的网站创意，我认为 eBay 为其新徽标创建的页面非常有趣。我只是想知道是否有人可以给我有关如何重新创建它的任何见解。

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

我想你可以通过间隙看到的标志被设置为主背景，固定，前部只是滚动过去。

两个主要问题：

  • 他们如何让“前”div 填充页面
  • 当您向下滚动页面时，他们如何让背景发生变化。

谢谢！

4

3 回答 3

6

其实很简单。他们有多个背景图像应用于多个section元素，然后他们应用了 afixed 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/

于 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 回答