wxss中background属性使用背景图片无效的问题

前提

• 所要实现的效果图如下所示：（两个 view 之间使用两个 格式为.png 的绑带图片相连接）
  

• 我的实现方式：习惯了通过伪元素设置background属性来实现。基于简便快捷的方式，并没有选择使用官方提供的<image/>组件来实现。

• 首次开发微信小程序，并不知道 background 属性中的背景图像（即background-image属性）无法将 url 设置为本地的图片路径。
• 如果你不小心设置了，就会出现下面的情况。

此处通过 background属性 设置了本地图片作为背景图

然后，你会惊喜的发现：居然报错了！

报错内容为：渲染层错误。
并且提示：wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签。
参考文档：本地资源无法通过 WXSS 获取（点击查看）

实现方式

使用经过base64格式编码过的图片

分析问题

原因：微信小程序中的背景图片不能是本地图片。
解决方法：

• 背景图片的路径换成远程网址，即网络图片；
• 使用base64格式编码的图片；
• 直接使用<image/>组件实现。

延伸阅读

1.什么是base64格式的编码？
图片的 base64 编码就是可以将一张图片的数据编码成一个字符串，然后我们可以使用这个字符串来代替本地图片的路径（地址）。

---

2.使用base64格式的编码有什么意义呢？
我们都知道，网页上的每一张图片，都是在网页加载时消耗一个 http 请求下载下来的。如果图片的下载不需要向服务器发出请求，而是可以随着HTML的加载同时下载到本地，那岂不是太好了。所以说，base64编码正好解决了这个问题。

---

3.什么时候使用base64格式的编码？
如果图片足够小，且存在特殊性用途（无法被制作为雪碧图，即CSS Sprites），base64格式的编码就是最明智的选择。

---

4.使用base64格式的编码并不代表性能优化
base64编码的优点我们上面也提及了：可以减少一个图片的HTTP请求。每一件事都有它的两面性，那么base64编码所带来的坏处是什么呢？因为图片经过base64编码后的字符串数据特别繁杂冗长，而大量使用base64编码格式的图片会导致CSS文件的体积不断增大，与此同时，CSS文件的大小还会影响整个页面的渲染速度，这就会导致图片无法及时加载而使用户长时间停留在空白页面。因此，虽然base64编码好用，但是我们不能滥用它。