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

时间:2011-05-30 17:35:54

标签: javascript css slideshow transparent graphical-logo

我偶然发现了这个网站:http://mantia.me/

他有一个很棒的徽标,对网站当前显示的内容作出反应,如果你在他的主页上等待徽标随图像的幻灯片放映而改变。我想知道是否有人知道如何复制效果。我猜它是一个透明的png,有一个旋转的主背景,然后该网站在顶层分层,但我可能错了。

有关如何制作类似内容的任何猜测?

图片:enter image description here enter image description here

2 个答案:

答案 0 :(得分:6)

他的所作所为非常简单。就像你提到的那样,它是一个透明的PNG,它匹配给定的背景(在这种情况下是白色)并用z-index放在它上面。其余的只是带有fadeInfadeOut图像的jQuery。

您可以在图像过渡的顶部查看png。 enter image description here

所以基本上你只需要一个divposition:relative将宽度设置为它的高度;然后在其中添加另一个div,其中包含jQuery幻灯片(请查看:http://medienfreunde.com/lab/innerfade/),将其设置为z-index:0然后添加另一个div(将在滑块顶部)并且将backgroundz-index添加到高于0的某个位置,您就可以了。

答案 1 :(得分:1)

他是这样做的:

<强> 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