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/

Answer 2

＆＃34;背景＆＃34;实际上是在实际内容项之间插入的一些<section>标记。通过为背景元素指定background-attachment: fixed;样式，可以实现页面背景的错觉。

Answer 3

在CSS源代码中，他们正在处理不断变化的背景和div填充，它没有被隐藏，因此您可以随意查看它并下载并使用它：）

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

3 个答案: