CSS多个背景以不同的速度滚动

Question

我今天遇到了这个网站而且我很神秘:http://www.actionbutton.net/

他是否使用某种已知技术作为他的背景,以不同的速度滚动并相互重叠.我查看了源代码,但我很困惑.有谁知道这种技术被称为什么以及如何学习它？

Answer 1

这是不使用JS的视差效果的近似值(因此背景以恒定速度滚动).jfiddle示例:http://jsfiddle.net/MFC9B/2/

关键是有一个2层嵌套的div,外面的一个用于保存背景,内层用于保存内容:

.section {        
    position:relative;
    z-index:1;
    height:500px;
    width:100%;
    background-attachment:fixed;    /* this keeps the background in place */
    background-size:100% 100%;
    background-repeat:no-repeat;
}
.content {
    position:relative;
    z-index:2;
    background-color:#fff;
    border:2px solid #666;    
    height:50%;    /* this height difference allows the bg to show through */    
}

Answer 2

它的召唤parallax有很多,plugin例如http://www.ianlunn.co.uk/plugins/jquery-parallax/