视差滚动-background-attachement

以前项目中没有涉及到视觉滚动的网站，可是毕竟是一种经常使用的网站类别，不得不了解。实现方法很简单，作一下简单的分析。。。

概述：滚动视差是指多层背景以不一样的速度移动，造成立体的运动效果，来带很是出色的视觉体验。

属性：background-attachment ，决定背景在视图中形态(固定、随区块固定)，需配合background-image使用。

值：background-attachment:scroll || local || fixed

local关键词表示背景至关于元素的内容固定。若是一个元素拥有滚动机制，背景将会随着元素的内容滚动。

使用：

 1 <style type="text/css">
 2 div{
 3 text-align: center;
 4 line-height: 500px;
 5 height: 500px;
 6 font-size: 26px;
 7 font-weight: 700;
 8 color: #000;
 9 background-size:cover ;
10 background-size:100% 100%;
11 background-attachment:fixed ;
12 }
13 .img1 {
14 background-image:url('4.jpg');
15 }
16 .img2 {
17 background-image:url('5.jpg');
18 }
19 .img3 {
20 background-image:url('2.jpg');
21 }
22 </style>
23 <div class="img1">i am img1</div>
24 <div class="img2">i am img2</div>
25 <div class="img3">i am img3</div>

...END.