透明PNG反應到網站的圖片滑塊和內容

Question

我只是碰到這個傢伙的網站偶然發現：http://mantia.me/

他有一個真棒標誌，反應到網站目前顯示的內容，如果你等待他的主頁標識的變化與幻燈片放映的圖像。我想知道是否有人知道如何複製效果。我猜這是一個帶有旋轉主背景的透明PNG，然後該網站位於頂層，但我可能是錯的。

任何猜測如何做類似的東西？

圖片：

Answer 1

這真的很簡單他有什麼。就像你提到的那樣，它是一個透明的PNG，與給定的背景相匹配（在這種情況下是白色），並將其放置在頂部z-index。剩下的僅僅是帶有fadeIn和fadeOut圖片的jQuery。

您可以查看圖像轉換頂部的png。

所以基本上你只需要一個div與position:relative設置它的寬度的高度;然後在裏面添加另一個div它有jQuery幻燈片（檢查出：http://medienfreunde.com/lab/innerfade/），將其設置爲z-index:0然後添加另一個div（它將在滑塊頂部）並將它添加background與z-index到高於0的東西以及你很好走。

Answer 2

這裏是他是如何做：

HTML

<div id="content"> 
    <div id="feature"></div> 
    <div id="navigation"></div> 
</div> 

CSS

#content { 
    position: relative; 
    width: 800px; 
    margin: 64px auto; 
    font: normal 13px/16px "myriad-pro-1","myriad-pro-2", sans-serif; 
    color: #404040; 
} 

#navigation{ 
    position: absolute; 
    z-index: 1000; 
    top: 0; 
    left: 0; 
    width: 800px; 
    height: 46px; 
    background: transparent 
     url(http://mantia.me/wp- content/themes/minimalouie/img/nav.png) 
     no-repeat top left; 
} 

#feature { 
    width: 800px; 
    height: 466px; 
    overflow: hidden; 
    background-color: aqua; 
} 

然後，他只是增加了一個img元素#feature。

<div id="feature"> 
    <img src="http://mantia.me/images/supermariobros_large.jpg" 
     alt="Super Mario Bros."> 
</div> 

請參閱fiddle。