关于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：纯色背景好像是无效的，必须是背景图