小程序设置背景图片的两种方法总结

背景图片

我们会时常遇到设置背景图片，这里简单地总结下两种方法:

1.background-image

background-image，顾名思义是背景图片的意思，设置父亲元素，然后通过background-image:url(‘图片的相对路径’);的办法来设置背景图片，可以将本地图片上传到github,qq 空间或者base64图片 来获取相对路径.
下面有一段简单的代码实例:

/*WXML代码*/
<view class='weather-wrapper'>
  <view class="temp">12°</view>
  <view class='weather'>晴天</view>
</view>

/*CSS代码*/
page{
  width:100%;
  height:100%;
}
.temp{
  text-align: center;
  font-size: 200rpx;
  line-height:1.4;
  opacity: 0.8;
}
.weather{
  text-align: center;
  font-size:40rpx;
  line-height:1.4;
  opacity:0.65;
}
.weather-wrapper{
  background-image: url(https://raw.githubusercontent.com/udacity/cn-wechat-weather/2-4/images/sunny-bg.png);
  padding-top: 174rpx;
  padding-bottom: 250rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

效果图如下:

以上首先设置了父亲元素，然后再通过background-image的方式来设置背景图片.

2.position方法

设置父亲元素为relative，然后让想设置的图片首先为子元素，然后设置为absolute,然后通过top,left定位的方式来定位，然后设置这个图片的宽度和高度为100%.

<view class='weather-wrapper'>
  <view class="temp">12°</view>
  <view class='weather'>晴天</view>
  <image class='weather-bg'  src='/images/sunny-bg.png'></image>
</view>

page{
  width:100%;
  height:100%;
}

.temp{
  text-align: center;
  font-size: 200rpx;
  line-height:1.4;
  opacity: 0.8;
}
.weather{
  text-align: center;
  font-size:40rpx;
  line-height:1.4;
  opacity:0.65;
}
.weather-wrapper{
  position:relative;
  padding-top: 174rpx;
  padding-bottom: 250rpx;
}
.weather-bg{
   position: absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   z-index:-1;
}

效果图：

以上是两种方法，没有好坏之分，但图片建议使用相对路径而不是本地图片.