我們知道，在PC端，想在一個頁面插入一張背景圖，只需要如下屬性即可。
background-image: url("../images/photo.png");
在小程序里面，如此做法就行不通了，圖片不但不會顯示而且還會報錯了
pages/index/index.wxss 中的本地資源圖片無法通過 WXSS 獲取，可以使用網絡圖片，或者 base64，或者使用<image/>標簽。
很多人都會有這樣的一種感受，在一邊學習一遍做項目的過程中，總會遇到很多坑，今天給大家填坑，如何給小程序頁面插入一張背景圖。
參考了一下小程序的參考手冊：https://www.w3cschool.cn/weixinapp/weixinapp-qa.html
在網上瀏覽了一遍，找到了幾個比較靠譜的解決方案，簡單方便。
解決方案：
解決方法一：
在使用背景圖片的時候用網絡圖片，就是用外鏈的形式，比如你將這張圖片放到你的服務器，如：https://xxxx/xxx.jpg；
1：用工具連接服務器
2：將桌面的圖片拖入指定服務器文件夾底下
3：得到圖片網絡連接，添加到代碼中，則可以顯示背景圖片
解決方法二：
將背景圖片使用編碼base64進行轉換，可以在這個網址進行http://tool.css-js.com/base64.html 轉換，如：background-image: url("轉換后得到的編碼文本")，如果多次使用的話可以將該值設置為全局變量，再在js文件進行引用即可；
1：打開在線圖片轉換平台
2：將桌面的圖片導入，生成base64編碼
3：將第三方平台編譯過后的base64編碼復制到wxss里面
// Base64 在wxss中的使用 page{ background-image: url("data:image/jpg;base64,/9j/4AAQSkZJRgABAQEA...."); }
4：效果如下：
缺點就是，這一大串編碼太占用我們的代碼空間了，鼠標要拖動許久許久，難免產生視覺疲勞。
原文作者：祈澈姑娘
技術博客：https://www.jianshu.com/u/05f416aefbe1