最近给人写了一个娱乐主题的微信小程序。很多背景如果单纯使用纯色做背景，会使小程序无法突出娱乐这个主题。所以，就用到了使用背景图片的形式提升一下页面的娱乐氛围。
我们先看一下效果图：
jietu-05.jpeg
要实现这个效果非常简单。
第一步：在页面对应的 wxml 顶部增加如下代码
<view class="cover-box"></view>
第二步：在页面对应的 wxss 增加对应的背景图片样式
.cover-box {
position: fixed;
background-size: 100% 100%;
height: 100%;
width: 100%;
background-image: url(xxxx.jpg);
}
background-image 中指定的必须是 https 协议的远程服务器图片。并且，这个图片指向的域名必须添加到微信小程序的白名单域名之中。
实现这两步之后，就算完成了。你就可以在
<view class="cover-box"></view>
代码后面按照平常的方式写你的代码就好了。
图片尺寸
关于背景图片的尺寸，我使用的是 750px * 1440px。在一些手机尺寸不是很匹配的情况下，有稍微的变形。但是，这依然不影响。在选用图片的时候，尽量规避一些有复杂图形，并且在图片拉伸会有明显审美问题的图片。
为了兄弟们在学习的时候能有一张靠谱的图片。我这里提供一张。
home-bg-03-#E13B4C.jpg
