VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动

一种设置小程序背景图片的方法

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

一种设置小程序背景图片的方法

前言:

一开始打算用background-image:url()来设置wxss文件中的背景图片,但是出现了错误。提示:pages/me/me.wxss中的本地资源映像无法通过wxss获取。您可以使用网络图像、base64或在标签小程序中设置区域的背景图像。在wxss文件中,存在无法获取本地资源的问题。

解决方案:

1.使用网络图片

我们可以将所需的背景图片上传到服务器,然后使用背景图片地址。

如果需要动态改变背景图片,可以设置内联样式绑定变量来动态改变背景图片;

903da70c77536785d340f2a74925835.png

2.使用base64格式的图片。

我们可以使用base64图像来设置背景图像。

这里我推荐一个base64图像格式的http://imgbase64.duoshitong.com/地址的在线转换。

选择将被转换为base64格式的图片。

91fd94d4cdb33efd756e0c24ca7a5ab.png

复制的代码放在后台: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;}这样我们也可以达到背景图片的效果。

推荐:小程序开发教程以上是小程序背景图片设置方法的详细内容。更多请关注主机参考其他相关文章!

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:一种设置小程序背景图片的方法 https://zhujicankao.com/79764.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 一种设置小程序背景图片的方法
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!