最近在重做以前做的翻页H5，有一些新的经验分享关于背景图片。翻页H5的背景图通常需要全屏。这里有一个问题。目前市面上的手机屏幕比例非常不一致，导致背景图片的处理。通常我会选择或设计一张600*1000比例的背景图（好记，PS输入方便，比例适中），比如这张美女的背影：（让我看看你的手，别不要伸到你的胯部！）A4.我四年前的解决方案。三四年前，还没有那么多纤细的手机，比如iPhone7，尤其是iPhoneX。我的解决方案是忍受适度的拉伸。当时常见的手机屏幕比例：(320*480)width/height=0.66iphone4(480*800)width/height=0.6三星和部分Android(750*1334)width/height=0.56iphone6背景图片的css是：.img{background-image:url('slide.jpg');背景大小：100%100%；}这样，width/height=0.6比例的手机就可以完美显示了，而比较扁平的手机比如iphone4的背景图会横向拉伸，如果比较瘦高的比如iphone6，则将被垂直拉伸。经计算，最高拉伸率约为11%，勉强可以接受。可以看到效果，中间是真图比例，左边是压扁的，右边是拉长的：（反正如果真的是这三种背景的妹子，我要！）第二，如果你现在还在用同样的方案，但是今天，突然间，越来越多像iPhoneX这样纤薄的手机冒出来了。如果原计划是取中间值的比例作为背景图，会是这样：最右边是iPhoneX上的拉伸图：你拥抱它。这显然是一种不可接受的畸形。当然，为了适配iPhoneX这样的手机，如果背景图片是老方案设计的，最好使用600*1050左右的标准图片比例。但无论怎么说，这个范围的极值都会让即使是中等比例的照片也带来无法忍受的拉伸比。3.切割方案所以考虑切割的方式。css3中的background-size有一个cover属性，用来处理背景的裁剪：将背景图片展开到足够大的尺寸，使背景图片完全覆盖背景区域。设置背景图片的css为：.img{background-image:url('slide.jpg');background-size:cover}生成的图片会有这样的效果：iPhone4比例的手机下半部分被切掉，iPhone6/iPhoneX比例切掉右边部分。这就带来了一个新的问题：照片的关键元素很容易被剪掉，比如美女的右臂在iPhoneX上已经看不到了。4.裁剪并保持背景图片显示的中心位置此时，我们可以使用background-position实现从四个边开始对图片进行裁剪。设置背景图片的css为：.img{background-image:url('slide.jpg');背景位置：中心；background-size:cover}添加背景的定位，裁剪时背景会保持居中裁剪效果：那么我们在构图的时候要考虑什么呢？5.选择（设计）图片时的构图我另外做了一个页面，把构图做成示意图：整张图就是设计图，蓝色部分会被剪掉，上下两部分会显示在iPhone4刻度上手机，而红色部分会被裁剪显示在iPhoneX秤上手机：看完这张图，你应该能知道，在设计或选图时，只需要将必须显示的元素放到哪里就可以了红蓝重叠（人物中的胸部、面部、臀部），可以保证照片的关键元素在任何手机上都不会丢失。所有效果都制作成html放在我的github项目：https://github.com/1897890924...并贴出我的个人博客https://sxg.kuashou.com
