透明 PNG 对网站图像滑块和内容做出反应

Question

我刚刚偶然发现了这个家伙的网站： http://mantia.me/

他有一个很棒的徽标，可以对网站当前显示的内容，如果您在他的主页上等待，徽标会随着图像幻灯片的显示而变化。我想知道是否有人知道如何复制这种效果。我猜它是一个带有旋转主背景的透明 png，然后该网站分层在顶部，但我可能是错的。

关于如何制作类似的东西有什么猜测吗？

图片：

Answer 1

他拥有的东西真的很简单。就像你提到的，它是一个透明的 PNG，与给定的背景（在本例中为白色）相匹配，并使用 z-index 将其放置在背景之上。其余的只是带有 fadeIn 和 fadeOut 图像的 jQuery。

您可以在图像过渡上方查看 png。

所以基本上你只需要一个带有 position:relative< 的 div /code> 设置宽度和高度；然后在其中添加另一个包含 jQuery 幻灯片的 div （查看一下：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;
}

然后他只需向 #feature 添加一个 img 元素。

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

请参阅小提琴。