由于分辨率越来越多样化，包括PC端、手机端还有IPAD等，为了能让背景图全屏显示，这里总结了几种方法，各有优缺点，可根据项目情况进行选择，往后项目过程中如有更好的方法会进行补充：1.利用样式让背景图全屏显示；2.利用js计算让背景图全屏显示。工具/原料moreSublime TextChrome浏览器调试利用样式让背景图全屏显示

第一种body标签添加图一中的css样式，这种方法有两点缺点：

背景图为了适配不同比例的屏幕会导致变形；

当数据超过一屏幕时候，滚动到下一屏幕，背景是空白的。

针对上面两点问题，可以修改样式解决，把background-size注释掉，background添加top center，这样图片就不会变形，但不会显示全部图片内容，会根据不同分辨率显示图片顶部和中间部分，适用于顶部有内容，底部纯色或者渐变色，且图片要大过最大分辨率。

第二点也可以把absolute改为fixed，背景固定不跟随内容滚动。

第二种body中第一行添加图一中的html和css样式，主要是利用img设置为width: 100%，height: 100%来实现全屏显示，要注意百分比是相对于父元素，所以父元素body要设置height: 100%；但也存在第一种的两点缺点，解决方法如第一种。

利用js计算让背景图全屏显示1/1分步阅读

如下图代码，跟利用样式的第二种区别在于利用js计算屏幕的宽高赋予img达到显示全屏。

利用js算出背景图宽高和屏幕宽高差，不缩放背景图，而是改动top和left，使背景图在屏幕一直显示中间部分，可以解决图片变形问题和超过一屏幕空白问题，但无法全部显示，且图片要大过最大屏幕分辨率。

注释掉html(body)的height: 100%，也可以显示超过一屏幕，但图片会变形。