介绍
这篇文章给大家分享的是有关小程序如何设置背景图片的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
前言:
一开始,打算在wxs文件中使用背景图片:url()来设置背景图,但是却出现了报错了,提示:页面/我/我。wxs中的本地资源图片无法通过wxs获取,可以使用网络图片,或者base64,或者使用& lt;图像/祝辞标签小程序中设置区域背景图。对于在wxs文件中,存在本地资源无法获取的问题。
解决方案:
1,使用网络图片
我们可以把需要的背景图片上传到服务器上,然后使用背景图片地址。
如果我们需要动态改变背景图片,我们可以设置行内样式风格绑定变量从而做到动态改变背景图片;
2,利用base64格式的图片
我们可以用base64的图片做到设置背景图片
在这里我推荐一个在线转换的base64图片格式的地址http://imgbase64.duoshitong.com/
选择图片会转换成base64格式的图片
复制里面的代码放到背景:url (base64转换的代码);这样既可做到设置背景图片也不用放到服务器上
(学习视频分享:php视频教程)
3,利用图像标签做到设置背景图片
思路:我们只要利用css中的z - index改变层级既可做到变成背景图的样子
看代码
wxml:
& lt; view class =,“login-box",在 ,,//本地图片 & lt;才能image src=https://www.yisu.com/static/images/login_bg.png '> 图像> 视图>
wxs:
页面{ ,高度:100%; ,宽度:100%; } .login-box { ,,身高:100%; } , image { 位置:才能,绝对; ,,左:0; 底才能:0; ,,显示:块; ,,宽度:100%; ,,z - index: -999; }
这样我们也可以做到背景图的效果。
感谢各位的阅读!关于“小程序如何设置背景图片”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!