透明PNG对站点图像滑块和内容有反应

| 我偶然发现了这个家伙网站：http：//mantia.me/ 他有一个很棒的徽标，可以对网站当前显示的内容做出反应，如果您在他的主页上等待，徽标会随着图像的幻灯片显示而变化。我想知道是否有人知道如何复制效果。我猜它是具有旋转主背景的透明png，然后该站点位于顶部，但是我可能错了。关于如何使事物相似的任何猜测？图片：

已邀请:

2 个回复

校勒魏寡

他拥有的东西真的很简单。就像您提到的那样，它是与给定背景（在本例中为白色）匹配的透明PNG，并以with0ѭ放置在其顶部。其余的只是带有fadeIn和fadeOut图片的jQuery。您可以在图像过渡的顶部查看png。所以基本上您只需要一个div和position:relative来设置宽度和高度即可；然后在其中添加另一个带有jQuery Slideshow的div（请查看：http://medienfreunde.com/lab/innerfade/），将其设置为z-index:0，然后添加另一个div（将在滑块顶部）并添加它是background和z-index到高于0的东西，那么您就很好了。

荒劫娇噬

这是他的做法：的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>

见小提琴。

要回复问题请先登录或注册

透明PNG对站点图像滑块和内容有反应

2 个回复

发起人

javascript

css

slideshow

graphical_logo

transparent

问题状态

透明PNG对站点图像滑块和内容有反应

与内容相关的链接

2 个回复

发起人

javascript

css

slideshow

graphical_logo

transparent

问题状态