小程序背景-微信小程序背景

1、 添加背景图（两步曲）

（1）、先在wxml里写一个块，块里包含一张图片即可，其实不加块也行，单独的一张图片就行了，自我代码习惯罢了（如下）

<!--背景图片-->
<view>
<image class="bg-image" mode="scaleToFill" src="/images/bg_1.png"></image>
</view>

（2）、在wxss里，咱们定义这个图片的规格就行了，那个块里面的”content”可以不去做任何处理（如下）

.bg-image
{ 
  width : 100%;
  height : 100%;  
  position: fixed;  
  z-index: -1;  
}

*解释：position据我的理解是，你要设置背景图，你肯定除了背景之外，还要有其他组件的，如果你就是想做个壁纸小程序的话，那你不用写这个，并且请你跳过后面的解释。

那这样，假如你有两个或多个组件，这里我们假设只有两个组件，第一个就是背景图，第二个也是个图片，这有两张图片，那你在wxml中写代码一般都是这样

欸，这样你去运行保存的话，他就会呈现出两个上下分布的块小程序背景，并没有出现背景图的效果，这个时候，我们就加个posittion : flexd，让上面的背景随便伸缩到任意一个位置，不会呈现出区域化的问题了，并且还要加z-index：-1，这是为了使背景图这个块变成最底层，各种好看的页面都是一层一层的，而这种层数不管再多小程序背景，你人眼都观察不出它的厚度的好嘛。