關於background-attachment: fixed 實現滾動視差的邏輯理解

使用 background-attachment: fixed 實現滾動視差

<section style="height: 300px;width:500px;background: url('http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg') fixed no-repeat;">IMG1</section>

以瀏覽器的視圖窗口做爲繪製區域繪製背景圖片，因此背景圖片相對於瀏覽器是fixed的，標籤所佔區域爲可視區域，可視區域只是圖片的一部分，當可視區域移動時（也就是被滾動），就會移動到圖片的相應部分，就有了滾動視差效果。
用UI的理解就是把背景圖放在畫板上固定，在上面加一個蒙版，而後在蒙版上開一個口子，口子在哪你就能看到那裏的部分圖片。

還有scroll、local相對比較好理解

• background-attachment : local 既然fixed是相對瀏覽器的，那local是相對於本身的，當本身的對子元素進行滾動時，背景也會進行移動

<div style="height: 300px;width:500px;overflow: auto;background: url('http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg') local no-repeat;">
        <section style="height: 300px;width:500px;">IMG2</section>
        <section style="height: 300px;width:500px;">IMG3</section>
</div>

• background-attachment : scroll 就是最普通的模式，背景和內容視圖是固定的。

ps：純色背景好像是無效的，必須是背景圖