如何在HTML + CSS中重新創建eBay新徽標頁

我對網站有個好主意，並且我認爲eBay爲其新徽標創建的頁面非常有趣。我只是想知道是否有人可以給我任何有關如何重新創建它的見解。如何在HTML + CSS中重新創建eBay新徽標頁

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

我有點收集您可以通過縫隙看到標誌被設置爲主要BG，固定和前部剛剛過去的滾動它。

兩個主要問題：

他們如何得到「前」 div來填充頁面
他們如何獲得BG改變，你向下滾動頁面。

謝謝！

來源

2012-09-27 Paul Herron

您是否試過[查看源代碼]（http://pages.ebay.com/announcements/new/js/jquery.main.js）？ –

我看過了這裏的CSS： http://pages.ebay.com/announcements/new/css/all.css 我不太確定我在找什麼。 –

其實很簡單。它們具有應用於多個section元素的多個背景圖像，然後它們應用了一個fixedbackground-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-27 12:31:23

在CSS源他們遞過的變化的背景和DIV填充，它沒有隱藏，因此您可以隨時看它和下載，並與它:)玩

來源

2012-09-27 12:24:34

的「背景」，其實是一些<section>在實際內容項目之間插入的標籤。通過爲背景元素指定background-attachment: fixed;樣式可以實現它是頁面背景的錯覺。

來源

2012-09-27 12:27:16 Kaivosukeltaja

如何在HTML + CSS中重新創建eBay新徽標頁

回答

相關問題