最近给人写了一个娱乐主题的微信小程序。很多背景如果单纯使用纯色做背景，会使小程序无法突出娱乐这个主题。所以，就用到了使用背景图片的形式提升一下页面的娱乐氛围。

我们先看一下效果图：

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