利用css给网页加一个纵深感强的背景

什么是纵深感强的背景？

像上图这样的看起来空间感很强的图片就是纵深感比较强的，让人感觉会比较有空间感，像我们平时写个人网站纯色背景或许不能给人一种印象深刻的感觉，但是如果用上了有纵深感的背景就会呈现出立体感，让人感觉很舒服。
有人可能会说，做一个背景的话直接去找一张有纵深感的图片就行了，但是别忘了，图片不一定了很好地适配各种分辨率的显示器，而且作为背景的话，图片肯定是需要清晰的，一张高清的图片可不小，如果你的服务器一般的话，下载一张大图片是要花不少时间的，这样就造成一种不好的用户体验，所以我这里说的是要用代码写出来。

思路分析

我用photoshop做了一个纵身背景：

说到底，纵深感就是空间感，你要用平面去营造一种空间的感觉，像上图，就像一个房间，如果把内容放到中间，就会起到突出效果。
我们可以把他分成6个矩形：

通过这样的一种组合就能形成空间感，所以我们只需要通过几个div盒子叠加就能形成这样的效果。

代码实现

html：

<!--容器，对应最大的矩形-->
<div class="bigBG">
  <!--四个角对应的矩形-->
  <div class="linear topright">