先来熟悉下css层叠顺序

如下图所示。具体细节可以看下大神总结的，链接

本次需要实现效果如下图所示:

顶部固定，背景图固定，内容上下滚动时候顶部和背景图不移动，且两个tab栏呈现的背景是不同的。

问题：

如果顶部不固定，其实挺好做的，只需要在切换tab栏的时候更换一下背景图片即可，但是需求是顶部tab栏需要固定（position：fixed），不随内容向上滚动而移动。那么就需要将一个页面划分成两个区域，一个是tab区域，一个是内容区域。此时再想设置一个完整的背景图片就不太好划分区域，

解决思路：

先将页面划分为两个区域，再将其合成一个区域。

•   第一步简单，分两个区域作设计，顶部（fixed）及内容部分（scroll），两个页面内容部分共享一个tab。
•   第二步：在整个页面外层再包裹一个存放背景图片的盒子。
•   动态绑定class，class随着当前的tab值来改变背景色，与内部图层区分开，这样就可以解决切换tab时整个背景都随着改变，且tab要固定在页面顶部的问题。