2019.8.15微信小程序·页面背景图片设置

错误原因：
pages/welcome/welcome.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用标签。

错误分析：

设置微信小程序指定页面背景时，欲将一张图片设置为背景图片，但设置本地图片后报错，原因在于无法使用本地照片，只能使用网络照片/或者本地图片的base64形式.

解决办法：

1. 网络图片地址：
   background-image:url(“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565671780366&di=1ed6f49c2effabc9c7665f936f81cbca&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F09%2F20180609211714_jtevm.thumb.700_0.jpg”);
   或者写成：
   background:url(“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565671780366&di=1ed6f49c2effabc9c7665f936f81cbca&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F09%2F20180609211714_jtevm.thumb.700_0.jpg”);

   注意：背景图片设置成功后可能会图片无法覆盖整改背景区域，因此需要添加一句：
   background-size: cover;

2. 转换地址：http://imgbase64.duoshitong.com/
   background:url(“此处输入转换后的地址即可”）。

附带简单源码：

<!--pages/welcome/welcome.wxml-->
<view class="container">
  <image class="img" src="/images/1.png"></image>
  <button type="primary" class="sty" bindtap="onTap">开启烟大之旅</button>
</view>

/*pages/welcome/welcome.wxss*/
    .container{
      display:flex;
      flex-direction:column;/*垂直方向*/
      align-items: center;/*居中对齐弹性盒的各项元素*/
      color:aqua;/*定义弹性盒内所有文字元素颜色*/
      /*background-color: #b3d4db;/*显示为全屏显示颜色？=给整个容器一个高度*/
      height:100%;
      background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565671780366&di=1ed6f49c2effabc9c7665f936f81cbca&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F09%2F20180609211714_jtevm.thumb.700_0.jpg");
      background-size: cover;
    }

注意：还有一种修改页面方法：直接在wxss页面中修改page整个页面。

/**index.wxss**/
page{
  background-size:100% 100%;//或者填写background-size:cover;其中差别请读者请自行体会
  background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565671780366&di=1ed6f49c2effabc9c7665f936f81cbca&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F09%2F20180609211714_jtevm.thumb.700_0.jpg');
}