background-attachment视差滚动效果原理

网上很多关于使用background-attachment: fixed实现视差滚动效果的文章,比如http://www.wufangbo.com/shi-jue-gun-dong-yuan-li/ ,但是为什么会产生这样的效果,好像都没有进行详细的说明,抽象能力不够的话看一次忘一次(至少我是这样的-.-)。所以我用了一种我比较容易理解和记住的方式画了张下面的原理图:

background-attachment视差滚动效果原理_第1张图片
视差滚动原理.png

当两个DIV同时与背景图区域产生重合,就会给我们造成视觉上的视差效果。
demo

你可能感兴趣的:(background-attachment视差滚动效果原理)