本文共 878 字，大约阅读时间需要 2 分钟。

微信小程序中，直接在css中直接使用本地图片为view设置背景图片：

报错：

VM198:5 pages/allTest/allTest.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用标签。请参考文档：https://developers.weixin.qq.com/miniprogram/dev/qa.html#%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90%E6%97%A0%E6%B3%95%E9%80%9A%E8%BF%87-wxss-%E8%8E%B7%E5%8F%96   8 |   align-content: center;   9 |   background-image: url(../../image/alltest_bag.jpg)> 10 | }     |  ^

会出现如下问题，微信小程序不能用CSS的方法加载本地图片，比如background-url(),除非你把本地图片base64化，否则只能够用image组件。如果想将图片作为背景，而且上面海排列其他的一些组件的话，需要使用定位布局了。

wxss:

.container{
       position: relative;}.other-widget{
       position: absolute;}

如果不采用定位的方法，other-widget就会按照块级元素排列在image的下边，但是如果我们采用绝对定位使other-widget脱离文档流，它就会相对于container进行定位，也就实现了在背景图片之上的效果。

1.看到这里了就点个在看支持下吧，你的「点赞，在看」是我创作的动力。

2.关注公众号【程序员成长指北】，回复「1」加入高级前端交流群！「在这里有好多 前端 开发者，会讨论 前端、 Node等 知识，互相学习」！

3.也可添加微信【ikoala520】，一起成长。

转载地址：https://blog.csdn.net/xgangzai/article/details/89920892 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！