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

【问题标题】：Transparent PNG Reacting to Sites Image Sliders and Content对网站图像滑块和内容作出反应的透明 PNG
【发布时间】：2011-09-04 23:19:18
【问题描述】：

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

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

关于如何制作类似的东西的任何猜测？

图片：

【问题讨论】：

标签： javascript css slideshow transparent graphical-logo

【解决方案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 的值，您就可以开始了。

【讨论】：

请注意这是一个解释；让您了解它是如何工作的。而不是给你完整的代码（勺子喂食不好）。我认为了解它的工作原理而不只是复制粘贴是很有价值的。
关键图片是名为“nav.png”的图片。
确实如此。它包含带有 TEXT 表单的背景。
感谢 kuroir，我认为这可能与 z-index 有关。我对 CSS 不太熟悉，所以这对很多人都有帮助。理解理论比复制代码好 100 倍。
我很高兴能为您服务。为有这种思维方式而赞叹。尽可能多地学习。干杯。

【解决方案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。

【讨论】：