什么是纵深感强的背景?
像上图这样的看起来空间感很强的图片就是纵深感比较强的,让人感觉会比较有空间感,像我们平时写个人网站纯色背景或许不能给人一种印象深刻的感觉,但是如果用上了有纵深感的背景就会呈现出立体感,让人感觉很舒服。
有人可能会说,做一个背景的话直接去找一张有纵深感的图片就行了,但是别忘了,图片不一定了很好地适配各种分辨率的显示器,而且作为背景的话,图片肯定是需要清晰的,一张高清的图片可不小,如果你的服务器一般的话,下载一张大图片是要花不少时间的,这样就造成一种不好的用户体验,所以我这里说的是要用代码写出来。
思路分析
我用photoshop做了一个纵身背景:
说到底,纵深感就是空间感,你要用平面去营造一种空间的感觉,像上图,就像一个房间,如果把内容放到中间,就会起到突出效果。
我们可以把他分成6个矩形:
通过这样的一种组合就能形成空间感,所以我们只需要通过几个div盒子叠加就能形成这样的效果。
代码实现
html:
<!--容器,对应最大的矩形-->
<div class="bigBG">
<!--四个角对应的矩形-->
<div class="linear topright">