微信小程序 - 设置背景图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20451879/article/details/89328318

需求场景

给整个页面设置背景图片

• 正常设置

background-image: url ('本地图片地址')

当我们设置完毕之后，你会发现根本 展示不出来 - - ~

原因

主要因为微信小程序通过background-image设置背景是有限制的，目前只支持以下俩种类型：

• 网络图片 (图片地址必须是https协议头)
• base64图片 （图片转化之后会字符串非常长）

实现步骤

1.找到对应的背景图，通过base64转换成新的图片地址

2.基于不是新手的原因，我们把base64的字符串放在.wxss文件下 （莫写行内，因为这个串太长，影响自己心情 ）

• .wxss ( 吐槽：这个字符串超出想象的长 )

注意
为了是背景图片自适应宽高，可以做如下设置：

配置版

  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;

完整版

.parent-bg {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-image: url(转换后的base64图片字符串)
  }

3.最后在 .wxml内引用我们上面写好的class 属性（大功告成 ~)

<view class='parent-bg'> </view>