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

Question

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

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

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

图片:

Answer 1

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

您可以在图像过渡的顶部查看png.

所以基本上你只需要一个div与position:relative设置宽度它的高度; 然后div在其中添加另一个具有jQuery幻灯片放映的内容(请查看此内容:http://medienfreunde.com/lab/innerfade/),将其设置为a z-index:0然后添加另一个div(将放在滑块顶部)并添加一个background用z-index的东西高于0你是好去.