如何創建此圖像效果？

我已經看了這個頁面了一段時間了。真是太棒了。但我無法分辨滾動中發生的背景圖像效果。通過代碼發現，他們正在使用Jquery和一些滾動插件，但沒有任何關於我可以看到的圖像。如何創建此圖像效果？

你會怎麼說它完成了？

2010-03-10 Industrial

非常有趣的是，這是一個頁面，需要一些時間來檢測...但非常酷。 – Zoidberg 2010-03-10 18:36:44

爲什麼使用jQuery標籤？對於很多事情來說，根本不需要JavaScript。 – Dykam 2010-03-10 18:43:09

這招很簡單，只需要一些CSS其中，每個板具有固定的背景圖像：

<style type="text/css"> 
    div { 
     height: 100%; 
     background-image: url(http://sstatic.net/so/img/logo.png); 
     background-attachment: fixed; 
     border: thin solid; 
    } 
    div.a { 
     background-repeat: repeat-x; 
     background-color: #FDD; 
    } 
    div.b { 
     background-repeat: repeat-y; 
     background-color: #DFD; 
    } 
    div.c { 
     background-repeat: no-repeat; 
     background-color: #DDF; 
    } 
</style> 

<div class="a">A</div> 
<div class="b">B</div> 
<div class="c">C</div>

這裏我使用的是相同的背景圖像，但不同的背景顏色和圖像重複應該顯示它是三個不同的元素。

編輯好吧，它似乎的有些懷疑什麼，我寫。事實上，引用的網站使用jQuery來做到這一點。但是，只能將圖像適合瀏覽器視口的寬度和高度，因爲您還無法調整背景圖像的大小。 CSS 3指定background-size property，但其支持仍然是使用供應商特定前綴（如-khtml-（Konqueror），-moz-（基於Gecko的瀏覽器，如Firefox），-o-（Opera）和-webkit-（基於WebKit的瀏覽器，如Safari））的專有產品。

如果您可以放棄這一點，您可以使用我向您展示的CSS技術。

來源

2010-03-10 18:36:10 Gumbo

你忘了使用JQuery在'.a'，'.b'和'.c' div上分配圖像。 – 2010-03-10 18:41:41

@The Elite紳士：爲什麼我應該在有簡單的CSS解決方案時使用jQuery？而DIV *有*背景圖片。 – Gumbo 2010-03-10 18:44:21

但他們仍然用JS做點什麼。如果我禁用JS，則根本不顯示背景圖像。 – 2010-03-10 18:45:02

它是4個div，每個背景圖像都有不同的背景圖片，特效的效果特別好的是「背景附加：固定;」屬性來停止後臺滾動。

如果您下載Firefox的Firebug，您可以檢查div的並觀察CSS如何使頁面行爲並嘗試自行復制它。

真的很好看的效果我必須承認:-)

來源

2010-03-10 18:37:19

如何創建此圖像效果？

回答

相關問題