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

【问题标题】：CSS multiple backgrounds scrolling at different speedsCSS多个背景以不同的速度滚动
【发布时间】：2013-08-27 16:32:30
【问题描述】：

我今天看到这个网站，我很困惑：http://www.actionbutton.net/

他是否对他的背景使用了某种已知的技术，以不同的速度滚动并相互重叠。我查看了来源，但很困惑。有谁知道这种技术叫什么以及如何学习它？

【问题讨论】：

??你有网站，所以只需查看源代码并弄清楚吗？

标签： css background-image

【解决方案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 */    
}

【讨论】：

【解决方案2】：

调用 parallax 有很多 plugin 用于此，例如http://www.ianlunn.co.uk/plugins/jquery-parallax/

【讨论】：

【解决方案3】：

你也可以考虑这样的事情（不需要 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/

【讨论】：

我对你的方法很好奇，但这还不足以让其他人效仿。我创建了一个包含文本的 div，但它没有做任何事情......你能写一些更完整的东西吗？