CSS多背景以不同的速度

Question

滚动我碰到这个网站走到今天，我被迷惑了：http://www.actionbutton.net/

他是使用某种已知的技术，他的背景是滚动以不同的速率和相互重叠。我看了看源头，但很困惑。有谁知道这项技术被称为什么以及如何学习它？

Answer 1

这是电话parallax有很多plugin这个例如http://www.ianlunn.co.uk/plugins/jquery-parallax/

Answer 2

你也可以考虑这样的事情（不需要的JavaScript）：

@keyframes backgroundscroller { 
    from { 
    background-position: 0% 0%;  
    } 
    to { 
    background-position: 500% 500%, 400% 400%, 300% 300%, 200% 200%, 100% 100%;  
    } 
} 

#yourdivid { 
    background-image: url('full/sprite1.png'), url('512/sprite2.png'), url('256/sprite3.png'), url('128/sprite4.png'), url('64/sprite5.png'); 

    animation-name: backgroundscroller; 
    animation-duration: 300s; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-direction: normal; 
} 

显然，你必须意识到，这将支持CSS3浏览器只工作，你还需要考虑，包括一个非常有用的JavaScript，负责在需要的地方添加前缀：http://leaverou.github.com/prefixfree/

Answer 3

下面是不使用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 */  
}