微信小程序background-image设置（文末还有wxss的万能模板）

80 阅读 0 评论 53 点赞

我是靠谱客的博主缥缈纸飞机，最近开发中收集的这篇文章主要介绍微信小程序background-image设置（文末还有wxss的万能模板），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

微信小程序通过background-image设置背景：线上图片，base64图片，不支持本地图片；
base64图片设置步骤如下：（这种方式如果图片过大，可能超内存）

1.在网站 http://imgbase64.duoshitong.com/ 上将图片转成base64格式的文本

2.在WXSS中使用以上文本：background-image: url(“data:image/png;base64,文本”);

3.为了是背景图片自适应宽高，可以做如下设置：

background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;

ps:线上图片，我试过上传QQ空间，csdn
QQ空间：微信小程序开发者工具无法显示，手机上可以
CSDN:图片右下角有logo
暂时没找到完美方案，在那个wxss不拿手的年代帮助了我很多，现在也不怎么样，但是有WEUI就是微信官方的wxss标准之后就简单了，直接开发者工具导入就可以了，定位到dist，希望可以帮助到大家。
链接：https://pan.baidu.com/s/1UBA_S0ZmF8ZKFuCi_nyGQQ
提取码：wqfs
（万一不小心失效了，可以下面扣我，我会及时补上）