如何使用CSS3来实现滚动视差效果
本篇内容主要讲解“如何使用CSS3来实现滚动视差效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用CSS3来实现滚动视差效果”吧!
创新互联成立于2013年，先为赛罕等服务建站，赛罕等地企业，进行企业商务咨询服务。为赛罕企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
在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:center center;
}
屏幕的背景图片为一条橙色线.随着滚动轴移动,橙色线的视觉位置不变.
CSS background-attachment 属性示例
使用background-attachment: fixed实现视差效果
为什么只有一小部分人知道，这种效果实际上可以用CSS实现。
为了实现视差效果，多个背景图片必须放置在不同的元素上。这些背景图需要定义成background-attachment: fixed。通过设定background-attachment，我们可以改变背景图像的效果和位置。
background-attachment的缺省值是scroll，也就是背景图片和内容的位置是相对静止的。这我们大家都见过，当我们上下滚动一个网页时，背景和内容一起滚动。
当把background-attachment设置成fixed时，事情会变得有趣。fixed是说背景图片不随内容一起滚动，而是跟窗口保持静止。也就是说，当你拖动滚动条时，背景图片没有变化。这就能够产生漂亮的视差效果。
让我看一个实际实现：
CSS Code复制内容到剪贴板
