本文所分享的知识点是【滚动视差效果background-attachment实战记录】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
滚动视差效果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的很多插件就实现了这么些的功能。
关于滚动视差效果background-attachment实战记录的相关讨论如下：
相关问题：我这个html 中background-attachment已经设置为fix...
答：body{background-image:url(Ps/a.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position: 100px 400px;}p{width:auto;height: 150px;} 图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页... >>详细
相关问题：在css中background-attachment: fixed的意思是啥
答：background-attachment :定义背景图片随滚动轴的移动方式 取值: scroll | fixed | inherit scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 inherit: 继承初始值: scroll 继承性: 否 适用于: 所有元素 >>详细
相关问题：求大神解决css问题 background-attachment: fixed;...
答：兄弟- - 你如果能把你的英语单词写对了！ 我想你就明白错在哪了！ >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-