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

Posted 2020-11-09

【我是坑】：wxss 中 background 属性使用背景图片无效。有些时候在开发工具上正常，但是手机上面预览背景图片无效了！

【原因】：微信小程序中背景图片不能是本地图片。

【解决】：换成远程网址或者图片base64编码。

【延伸阅读】：

1.什么是 base64 编码?　
图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。这样做有什么意义呢？我们知道，网页上的每一个图片，都是需要消耗一个 http 请求下载来的（所以才有了 css sprites 技术的应运而生，但是 css sprites 也有自身的局限性）。要是图片的下载不用向服务器发出请求，而可以随着 html 的下载同时下载到本地那就太好了，而 base64 正好能解决这个问题。

2.什么时候用 base64 编码？
在很多地方，我们经常会制作一个很小的图片大概是几px*几px，然后平铺它当背景图。因为是背景图的缘故，这种图片往往只有几十字节，却需要一个 http 请求，十分不值得。那么此时将它转化为 base64 编码，何乐而不为？！因此，如果图片足够小且因为用处的特殊性无法被制作成雪碧图（Css Sprites）的话，那么就明智的选择用base64 编码吧。

3.使用 base64 不代表性能优化
是的，使用 base64 的好处是能够减少一个图片的 HTTP 请求，然而，与之同时付出的代价则是 CSS 文件体积的增大，CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕。另外，base64 编码还会造成代码可读性变差。所以不能滥用 base64 编码。

4.更便捷的将图片转化为 base64 编码
将图片转化为 base64 编码有许多工具，但是经常被墙登陆不了。这里介绍一个更为快捷的方法，就是利用 Chrome 浏览器或 QQ 浏览器，这里以 QQ 浏览器为例，具体做法如下：打开 QQ 浏览器新建一个窗口，然后把要转化的图片直接拖入浏览器，鼠标右键，选择“查看”菜单，如下图所示，就会显示该图片的 base64 编码，是不是很方便。