小程序背景图片的设置

小程序背景图片的设置

在wxss文件中，使用background-image: url();设置背景图，报错，提示 pages/me/me.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用标签小程序中设置区域背景图，对于在wxss文件中，存在本地资源无法获取的问题。解决方案在错误提示中也给出来了
个人推荐第三种方法

方法一:使用网络图片

我们可以把需要的背景图片上传到服务器上，然后使用背景图片地址。
如果我们需要动态改变背景图片，我们可以设置行内样式style绑定变量从而做到动态改变背景图片；

方法二:利用base64格式的图片

我们可以用base64的图片做到设置背景图片
在这里我推荐一个在线转换的base64图片格式的地址http://tool.chinaz.com/tools/imgtobase/
选择图片会转换成base64格式的图片

复制里面的代码放到background: url(https://blog.csdn.net/base64%E8%BD%AC%E6%8D%A2%E7%9A%84%E4%BB%A3%E7%A0%81);这样既可做到设置背景图片也不用放到服务器上

方法三:利用image标签做到设置背景图片

思路：我们只要利用css中的z-index改变层级既可做到变成背景图的样子
wxml

wxss

效果