主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
前言:
一开始打算用background-image:url()来设置wxss文件中的背景图片,但是出现了错误。提示:pages/me/me.wxss中的本地资源映像无法通过wxss获取。您可以使用网络图像、base64或在标签小程序中设置区域的背景图像。在wxss文件中,存在无法获取本地资源的问题。
解决方案:
1.使用网络图片
我们可以将所需的背景图片上传到服务器,然后使用背景图片地址。
如果需要动态改变背景图片,可以设置内联样式绑定变量来动态改变背景图片;
2.使用base64格式的图片。
我们可以使用base64图像来设置背景图像。
这里我推荐一个base64图像格式的http://imgbase64.duoshitong.com/地址的在线转换。
选择将被转换为base64格式的图片。
复制的代码放在后台:url(base64转换代码);这样就可以设置背景图片,不用放到服务器上。
(学习视频分享:php视频教程)
3.使用图像标签设置背景图片。
想法:我们只需要在css中使用z-index来改变层次结构,使其成为背景图片即可。
看代码。
wxml:
ltview class = login -box ; gt//本地图片< image src = # 39../../../static/images/log in _ BG . png # 39; gt lt/image gt; lt/view gt;wxss:
页面{高度:100%;宽度:100%;}.login-box {高度:100%;} image { position:绝对;左:0;底部:0;显示:块;宽度:100%;z-指数:-999;}这样我们也可以达到背景图片的效果。
推荐:小程序开发教程以上是小程序背景图片设置方法的详细内容。更多请关注主机参考其他相关文章!
这几篇文章你可能也喜欢:
- 如何实现小程序发送服务通知(小程序如何主动向用户发送通知)
- 如何获取小程序的unionid(如何获取小程序的页面路径)
- 生成海报的示例小程序(Java后端)(微信小程序生成海报演示)
- 什么是小程序? 有哪些功能?(什么是小程序?有哪些功能?)
- 介绍如何用小程序生成参数二维码(二维码+小程序参数)
本文由主机参考刊发,转载请注明:一种设置小程序背景图片的方法 https://zhujicankao.com/79764.html
评论前必须登录!
注册