用background-attachment:fixed做动画效果

先看一下这个demo

上下滚动这个demo页面（用IE6的可以先一边去），可以看到图片有切换的动画效果，感觉还挺先进的，但其实这个demo的页面的代码灰常简单，就是在几个div里放几张背景图片，然后把背景图片设为固定就行了。

所以background-attachment:fixed真的是一个很神奇的东西，如果利用得好可以做出很炫的效果。下面就详细说下background-attachment属性。

background-attachment的一些说明：

background-attachment -- 定义背景图片随滚动轴的移动方式

• 取值: scroll | fixed | inherit
  • scroll: 随着页面的滚动轴背景图片将移动
  • fixed: 随着页面的滚动轴背景图片不会移动
  • inherit: 继承初始值: scroll
• 继承性: 否
• 适用于: 所有元素

取值为scroll的时候很好理解，就是背景会随着滚动条滚动。取值为fixed的时候，意思是固定背景，既然说了是固定，那么固定在哪里呢？这就要由background-position的值来决定了。我们知道background-position的值是相对某个区域来讲的，那么background-attachment为fixed的背景的background-position是相对于什么来说的呢，是背景所在的元素吗？不是，而是相对于浏览器视窗来说的,不管这个元素在什么地方，如果它的background-attachment为fixed,则它的背景的位置就与它本身无关了，因为它的背景始终是参照浏览器的可见视窗来定位的。当然，如果一个元素在浏览器可见视窗以外，但它的背景在浏览器视窗里面，那这个背景我们仍然是看不到的，只有这个元素出现在浏览器视窗以内，并且能被我们看到，才能看到它的背景。记住一点，background-attachment为fixed的背景永远不会动，即使元素本身动了，背景却还是停留在那里，而且它只会在它本来的元素上显示出来。

绝大多数浏览器都支持background-attachment:fixed,但IE6除外。其实六爷也是支持background-attachment:fixed的，只不过不是在所有的元素上都支持，它老人家只在html和body元素上支持。

就这些了，发挥下想象力，真的可以用这货弄出很洋气的东西。