微信小程序背景图片设置问题

我们都知道，用css给网页设置背景图片，可以导入网络图片和本地图片。

1. 网络图片：

元素定位{
background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1517753496248&di=c464b97f6d0b3937307066e600043e14&imgtype=0&src=http%3A%2F%2Fwww.86ps.com%2FimgWeb%2Fpsd%2Fhf_zw%2FZW_033.jpg'); 
}

2. 本地图片：

元素定位{background-image: url('../../imgs/花瓣.jpg'); }

在微信开发环境中，确信无误没有用错第二种方法，但是却无法加载出来。

而在wxml中用image标签却可以添加本地图片。

我相当不解，于是在wxss中尝试了输入网络图片地址，发现可以显示。

究其原因，是因为在微信小程序开发中本地资源图片无法通过WXSS获取，可以使用网络图片，或者 base64，或者使用<image/>标签。

 

综上，在微信开发过程中，要添加背景可以选择以下方式：

1. 在wxss中直接po上网络图片，将图片配置在服务器上；

2. 通过在wxml中添加内联样式或直接使用<image/>标签来设置背景；

3. 转换图片为base64格式。