CSS 多个背景以不同的速度滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9752491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS multiple backgrounds scrolling at different speeds
提问by ballaw
I came across this website today and I was mystified: http://www.actionbutton.net/
我今天偶然发现了这个网站，我很困惑：http://www.actionbutton.net/
Is he using some kind of known technique for his backgrounds that scroll at a different rate and overlap each other. I looked at the source but am pretty confused. Does anyone know what the technique is called and how to learn it?
他是否对他的背景使用了某种已知的技术，这些技术以不同的速度滚动并相互重叠。我查看了来源，但很困惑。有谁知道这种技术叫什么以及如何学习它？
采纳答案by Rezigned
It's call parallaxthere's plenty of pluginfor this e.g. http://www.ianlunn.co.uk/plugins/jquery-parallax/
它的调用parallax有很多，plugin例如http://www.ianlunn.co.uk/plugins/jquery-parallax/
回答by Frank Yin
Here is an approximation of the parallax effect that doesn't use JS (thus backgrounds are scrolling at constant speed). The jfiddle example: http://jsfiddle.net/MFC9B/2/
这是不使用 JS 的视差效果的近似值（因此背景以恒定速度滚动）。jfiddle 示例：http: //jsfiddle.net/MFC9B/2/
Key is that there is a 2-layer nested divs, the outer one to hold the background, the inner one to hold the content:
关键是有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 */
}
回答by Andrea Sciamanna
You could also consider something like that (no javascript is required):
您也可以考虑类似的事情（不需要 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;
}
Obviously you must be aware that this will work only with browsers that support CSS3and you also want to consider including a very useful javascript that takes care of adding prefixes where and if needed: http://leaverou.github.com/prefixfree/
显然，您必须意识到这仅适用于支持 CSS3 的浏览器，并且您还想考虑包含一个非常有用的 javascript，它负责在需要的地方添加前缀：http: //leaverou.github.com/prefixfree/
