今天小编跟大家讲解下有关滚动视差效果background-attachment实战记录 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关滚动视差效果background-attachment实战记录 的相关资料，希望小伙伴们看了有所帮助。
滚动视差效果的实现原理是在同一个页面上将页面元素分为多层 例如可以分为背景、内容、贴图层 在滚动页面的时候让三者滚动的速度不一 从而在人的视觉上能够形成一种立体的近似效果。最近在做一个项目wiki的时候要用到滚动视差的东西 所以顺便记录一下。一般来说背景层是滚动里面最慢的 内容层可以和页面的滚动速度一致。 较为简单的滚动视差效果两层就可以了 一个背景 然后在背景上滚动内容。CSS中用来定义背景滚动属性的是background-attachment属性 具体取值如下： •scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。 •fixed: 当页面的其余部分滚动时 背景图像不会移动。 •inherit: 规定应该从父元素继承 background-attachment 属性的设置。 •初始值: scroll •继承性: 否 •适用于: 所有元素 在body中定义背景图像以及属性时设置背景为固定 那么在背景上的内容就可以相对进行滑动 就能够初步实现一个滚动视差的效果。 复制代码代码如下: body{ text-align:center; background-attachment:fixed; } 不过CSS虽然简单但是实现的效果确实是很有限的。一个貌似只能做出两个图层的效果。 另一种用CSS实现滚动视差的做法是用百分比对页面中的元素进行定位 从而在调整页面大小的时候能够出现元素间相对移动的效果。当然 如果加上CSS3中的transition能够使得背景进行移动的话也能够实现动态的滚动效果。有兴趣的可以去一试。 所以说滚动视差的实现实现最好的还是JS进行 比如JQUERY的很多插件就实现了这么些的功能。来源：爱蒂网
