css设置背景图片随滚动缓慢滚动_使用CSS3来实现滚动视差效果的教程

“视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果，它其实就是利用图片形成不同的层，分别以不同的速度，不同的方向移动产生的效果。这会产生出很奇妙的视觉效果，能有力的吸引住浏览者的目光。

在web设计中，最常见的实现视差效果的方式是使用jQuery插件。但这种方法有一些弊端。这些插件大多都是在window对象的scroll事件上放置监听器。这会导致JavaScript需要处理大量的事件触发(处理scroll事件很容易造成浏览器性能问题，使用时需要非常小心。)移动不同的层，计算背景的位置，设置图片的属性，这都引起了大量的DOM操作。

简言之，使用JavaScript来实现视差效果会让页面的滚动出现性能问题，出现卡顿。

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

取值: scroll | fixed | inherit

scroll: 随着页面的滚动轴背景图片将移动

fixed: 随着页面的滚动轴背景图片不会移动

inherit: 继承

初始值: scroll

继承性: 否

适用于: 所有元素

background:背景.attachment:附着.

示例

CSS Code复制内容到剪贴板

body

{

background-image:url('list-orange.png');

background-attachment:fixed;

background-repeat:repeat-x;

background-position:centercenter