先看一下这个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元素上支持。
就这些了,发挥下想象力,真的可以用这货弄出很洋气的东西。