視差滾動-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.