透明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。