目标是创建一个无限滚动的两层视差背景。该效果在 Mac Chrome 和 Safari 中完美运行，但在 Firefox 中会断断续续。任何想法为什么？谢谢!
<style>
body {
background-color: black;
}
#container {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
@-webkit-keyframes scroll {
100% {
background-position: 0 0;
}
}
@keyframes scroll {
100% {
background-position: 0 0;
}
}
.bg1 {
-webkit-animation: scroll 2.5s linear infinite;
animation: scroll 2.5s linear infinite;
background-image: url(path/to/image);
background-position: 0 -156px;
background-size: 128px 156px;
height: 100%;
opacity: 0.5;
position: fixed;
width: 100%;
}
.bg2 {
-webkit-animation: scroll 5s linear infinite;
animation: scroll 5s linear infinite;
background-image: url(path/to/image);
background-position: 0 -78px;
background-size: 64px 78px;
height: 100%;
opacity: 0.25;
position: fixed;
width: 100%;
}
</style>
<body>
<div id="container">
<div id="bg1" class="bg1"></div>
<div id="bg2" class="bg2"></div>
</div>
</body>
最佳答案
您的代码中没有任何 -moz- 属性。 -webkit- 在 chrome 和 safari 中均受支持。 但是对于 firefox 你应该在一些旧版本中有 -moz-prefix。
关于css - 通过关键帧的多个背景图像位置的动画在 Chrome 和 Safari 中有效，但在 Firefox 中无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24565437/