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.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;
    }

2019.8.15微信小程序·页面背景图片设置_第1张图片
注意:还有一种修改页面方法:直接在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');
}

你可能感兴趣的:(2019.8.15微信小程序·页面背景图片设置)