【小程序·小技巧】小程序图片当背景？图片背景就要花里胡哨！

问题描述：
    很多时候单色的背景满足不了我开发花里胡哨的需求，使用图片开发又出现各种问题，问题有但不限：

1.图片无法覆盖到整个屏幕
2.图片图像就是不在中间
3.图片把组件挡住了
4.图片没挡住组件但是影响了事件的触发
5.图片没到背后去反而成为页面组件展示的一部分
6.等等

    我们先看下解决问题的预览：

示例图1

示例图2

示例图3：动图也可，效果更好

一堆问题一个对策，上代码！
视图层代码，wxml：

 <view>
  <image class = "bk" src='/image/background.jpg' mode="aspectFill" ></image>
</view>

视图层的层叠样式设计wcss：

 .bk{
  width: 100%;
  height:100%;
  position:fixed;
  background-size: 100% 100%;
  z-index:-1;
}

注意：
1.组件必须位于wxml最上方。
2.如果没能位于图层最下面，更改z-index属性绝对值为更大的数。
3.如果逻辑不能独立，可以用block块包裹。

补：有些人可能也不会纯色的，纯色不需要视图层组件设置，直接层叠样式设计即可。
代码是：

page{
    background-color:#99CCFF;
}

上个示例图：

示例图4：纯色

后记：
    看了我直接小程序概念理解的都知道小程序包上传是有大小限制的，这些图片还是放到云端然后使用数据绑定显示更好。
解决方案：
在js页面下载为data

  data: {
    notInMotto :"必须登陆才可以浏览失物信息",
    userInfo: {},
    schoolBackground:"cloud://mychd-find-4s9do.6d79-mychd-find-4s9do-1301544649/系统媒体文件/长大背景/校本部教学楼.jpg"
  },

在前端页面用数据绑定实现展示：

	<view>
		<image class="backgroundPic" src='{{schoolBackground}}' mode="aspectFill"></image>
	</view>

前端css代码：

.backgroundPic{
  width: 100%;
  height:100%;
  position:fixed;
  background-size: 100% 100%;
  z-index:-1;
}

    要感谢最帅的lby同学成功解决了我们队参赛时的这个开发问题，之前我的图片一直被当成组件显示，也不能达到好的覆盖模式，lby赛高！