实时开发查看天气微信小程序——添加小程序的背景(2)

上一个环节我们调整了针对于苹果手机的尺寸大小相关的数据，此时我们就需要给小程序进行简单的背景添加。

现在我们只需要把背景色替换成图片了。由于weather-wrapper都已经把高度和宽度设置好了，图片只需要100%占满weather-wrapper就可以了。

也就是占满屏幕：

添加图片完成，效果如上图所示。

在pages/index/index.wxml中写入如下代码：

-<view class="temp">12°</view> 
+<view class="temp">12°</view>
+<view class="weather">晴天</view>

设置天气类的属性：

.weather {
  text-align: center;
  font-size: 40rpx;
  line-height: 56rpx;
  opacity: 0.65;
}

在 wxml 文件中添加了新的视图weather-wrapper，并将temp和weather两个视图放在其中。

<view class="weather-wrapper">
  <view class="temp">12°</view>
  <view class="weather">晴天</view>
</view>

接着我设置 weather wrapper的上填充为174rpx, 下填充为250 rpx，加上两个文本框的高度 280rpx 和 56 rpx，正好760rpx。 如何保证宽度是 750 rpx 呢？ 整个屏幕宽度就是 750 rpx, 因此只要占满整个屏幕就可以了！

.weather-wrapper{
  padding-top: 174rpx;
  padding-bottom: 250rpx;
}

现在还不是很明显，我们来修改一下weather-wrapper的背景颜色，就可以看到了。

background-color: moccasin;