微信小程序开发—背景图片全屏（无白条）

错误示例

微信小程序开发过程中，为了增加界面的美观程度，可以尝试将一张图片设置为背景。在网上最主要的方法为：
index.wxml

<view class="content">
  <!--pics文件夹下的background.jpg文件-->
  <image class='background' src="/images/beijing.jpg" mode="aspectFill"></image>
  <!--页面其它部分-->
</view>

index.wxss

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

但是问题出现了，在导航栏和图片的交界处出现了一条白线，十分影响美观。

正确示例

所以需要再加上如下两段代码，以便于隐藏这一条白条：
index.wxml（注：此条代码必须放在最后，否则可能会把这段代码之后的view组件遮盖）

<view class='main'>
  <image src="{{url}}" mode='widthFix' >
  </image>
</view>

index.wxss

.main{
  width: 100%;
  height: 100%;
}
image{
  width:100%;
  height: 100%;
  position: absolute;
  top:0px;
  bottom:0px;
}

效果如下：

正确代码段

为方便摘用，整合为一下内容：
index.wxml

<view class="content">
  <!--pics文件夹下的background.jpg文件-->
  <image class='background' src="/images/beijing.jpg" mode="aspectFill"></image>
  <!--页面其它部分-->
</view>

//*************此处添加代码*************//

<view class='main'>
  <image src="{{url}}" mode='widthFix' >
  </image>
</view>

index.wxss

page{
  height:100%;
  }
.background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;
  }
image{
  width:100%;
  height: 100%;
  position: absolute;
  top:0px;
  bottom:0px;
}
.main{
  width: 100%;
  height: 100%;
}