设定小程序背景图片的几种方法
Admin 2021-05-27 群英行业资讯
前言:
一开始,打算在wxss文件中使用background-image:url()来设置背景图,但是却出现了报错了,提示:pages/me/me.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签小程序中设置区域背景图。对于在wxss文件中,存在本地资源无法获取的问题。
解决方案:
1、使用网络图片
我们可以把需要的背景图片上传到服务器上,然后使用背景图片地址。
如果我们需要动态改变背景图片,我们可以设置行内样式style绑定变量从而做到动态改变背景图片;
2、利用base64格式的图片
我们可以用base64的图片做到设置背景图片
在这里我推荐一个在线转换的base64图片格式的地址http://imgbase64.duoshitong.com/
选择图片会转换成base64格式的图片
复制里面的代码放到background: url(base64转换的代码);这样既可做到设置背景图片也不用放到服务器上
(学习视频分享:php视频教程)
3、利用image标签做到设置背景图片
思路:我们只要利用css中的z-index改变层级既可做到变成背景图的样子
看代码
wxml:
<view class = "login-box" > //本地图片 <image src='../../../static/images/login_bg.png'></image> </view>
wxss:
page{ height: 100%; width: 100%; } .login-box { height: 100%; } image { position: absolute; left: 0; bottom: 0; display: block; width: 100%; z-index: -999; }
这样我们也可以做到背景图的效果。
相关推荐:小程序开发教程
以上就是小程序背景图片设置方法的详细内容,更多请关注群英网络其它相关文章!
(来源:csdn)
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
关于微信小程序开发一直想写一篇相关的文章总结和记录下,结果拖延症犯了迟迟没有下笔;今天就一起来看看吧。
如何解决互联网服务器数据中心能源需求上升的问题呢?现代化的互联网服务器数据中心消耗的能源比以往任何时候都要多,而随着基因组研究、加密货币和高密度计算系统进入数据中心,每台机器的千瓦消耗就上升到两位数甚至三位数。那么如何解决互联网服务器数据中心能源需求上升的问题呢?
小程序团队推出了自己的开发工具-微信开发者工具,目前微信开发者工具任然在不断的完善中,在开发小程序时经常要不断的更新;本栏目介绍小程序的开发过程以及遇到的问题和大家做个分享。
本文为大家介绍了小程序如何正确部署到线上环境的方法,具有一定的参考价值,希望能对大家有所帮助。
如何了解服务器类型与资源?有哪些方法?任何服务器上线,最重要的一环便是规划阶段。假设已有许多数据中心实施方案,选择将采用的服务器技术就十分关键了。很多情况下,IT管理员们会砸钱去购买他们所能购买的最贵和最先进的系统。虽然这样可能在初始阶段运作良好,但这并不是最稳定的解决方案。