本文轉載於:猿2048網站https://www.mk2048.com/blog/blog.php?id=ijc0ib&title=%E8%A7%86%E5%B7%AE%E6%BB%9A%E5%8A%A8-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.

本文轉載於:猿2048https://www.mk2048.com/blog/blog.php?id=ijc0ib&title=%E8%A7%86%E5%B7%AE%E6%BB%9A%E5%8A%A8-backg