网页设计中响应式左右结构网页的背景图选择及处理技巧

本文所说的网页设计并非ps设计UI图，而是前端工程师在有大概构思但没有设计图的情况下直接写网页。

最近在写我的个人主页，全屏左右结构，左边的背景是轮播图，轮播图上有一个透明黑色的div层，在做的时候我发现这个背景图片的选择和处理尤为重要，需要一定的构图知识，图选择并处理好，效果立马大不一样。

因为是全屏，我左右用的都是百分比，刚开始因为首页是全视频背景，所以左边是25%、右边是75%，这样看起来左边不会太宽，但是在做另一个页面时就不能用视频做背景了，得是左边用轮播图做背景，右边纯白，此时左边依然是25%的话，怎么处理都有图片不完整，那么第一个经验来了：左右结构的网页，如果左边以轮播图为背景，那么建议将整个网页三等分，也就是左边33%，右边67%。

在左边宽度不固定的情况下，如何将背景图处理至最小，且任何时候图片看起来都是完整的？

第一次做的人肯定都觉得既然宽度不固定那我就找一张大图，比如1920*1080的，这样就不用担心图片不够的情况，其实在保持清晰度差不多的情况下，1920*1080的图片是很大的，基本上都在150kb以上，背景图片尺寸的css写法无非就是background-size: cover，那么方法来了：1920*1080的电脑全屏化，笔记本高分辨率用户请用360安全浏览器f11，然后用截图工具量一下最大宽是多少，实测左边为33%时最大宽为634px，可能略有出入，就按640px算，处理图片时先将高度调为1080px，然后截取宽度为640px的部分，这样图片就会处理到很小了。

接着说如何使图片在任何时候看起来都是完整的。首先要会选图，其次要会处理图，以pc为例：

在原图上我截取到的640px*1080px的图像如下：

有高楼，有马路，而且马路是完整的，就像用手机拍的一张完整图片，再如：

我截取之后的是：

河流在中间，两边是山川，我想大家已经会选图了，打开一个图片网站比如摄图网，我们就要找这种的，截取部分会是完整的，多的就不举例子了，来看最终效果：

gif图稍微有点卡顿，这里没有给大家整个网页效果，感知起来可能比较差。

然后说响应式的处理，左右结构网页响应式肯定是左边在上，右边在下，此时上半部分的高度就得是固定的了，一是考虑平板用户，二是用百分比控制各元素之间的间距很不方便，所以我把我的上半部分高度改为固定200px，刚说了要考虑平板用户，那么此时上半部分的背景图又该如何选择和处理呢？

选图遵循中间线对称原则，处理先将图片宽度处理为响应式开始的宽度，然后截取高度为200px的部分，截取部分依然遵循中间线对称原则。

举例：

我在原图截取之后的是

随着设备宽度慢慢变小，图片右边的部分会被隐藏，但是不管宽度是多少，用户看到的图片都是对称的且美的，这就是中间线对称图片的好处，这个原则应该也是摄影中的一个技巧，至于术语叫什么我不知道。

来分别录制iPad Pro和iPhone5的效果图：

以上就是我试过n张图片后总结出来的经验，看了我的经验相信你在左右结构网页的背景图选择和处理上会事半功倍。实际上，处理图片使网页在视觉效果上达到最佳和不处理图片随随便便找一张的网页效果差距是非常大的，这个大家真正做的时候就会明白。