微信小程序css设置本地背景图片

您所在的位置:网站首页 微信背景地球图片的来历怎么设置 微信小程序css设置本地背景图片

微信小程序css设置本地背景图片

2024-07-14 13:17| 来源: 网络整理| 查看: 265

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

div{ width: 500px; height: 500px; } .box1{ background-image: url(../../image/alltest_bag.jpg); }

报错:

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组件。如果想将图片作为背景,而且上面海排列其他的一些组件的话,需要使用定位布局了。 代码如下: xwml:

wxss:

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

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

1.看到这里了就点个在看支持下吧,你的「点赞,在看」是我创作的动力。 2.关注公众号【程序员成长指北】,回复「1」加入高级前端交流群!「在这里有好多 前端 开发者,会讨论 前端、 Node等 知识,互相学习」! 3.也可添加微信【ikoala520】,一起成长。 在这里插入图片描述



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3