小程序设置背景图片 (方法全) | 您所在的位置:网站首页 › 秒杀系统如何设计图片背景图 › 小程序设置背景图片 (方法全) |
小程序背景图设置 在wxss文件中,使用background-image: url();设置背景图,报错,提示 pages/me/me.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用标签小程序中设置区域背景图,对于在wxss文件中,存在本地资源无法获取的问题。解决方案在错误提示中也给出来了 1、使用网络图片 我们可以把需要的背景图片上传到服务器上,然后使用背景图片地址。 如果我们需要动态改变背景图片,我们可以设置行内样式style绑定变量从而做到动态改变背景图片; 2.利用base64格式的图片 我们可以用base64的图片做到设置背景图片 在这里我推荐一个在线转换的base64图片格式的地址http://imgbase64.duoshitong.com/ 选择图片会转换成base64格式的图片 复制里面的代码放到background: url(base64转换的代码);这样既可做到设置背景图片也不用放到服务器上 3.利用image标签做到设置背景图片 思路:我们只要利用css中的z-index改变层级既可做到变成背景图的样子 看代码 wxml: //本地图片wxss: page{ height: 100%; width: 100%; } .login-box { height: 100%; } image { position: absolute; left: 0; bottom: 0; display: block; width: 100%; z-index: -999; }这样我们也可以做到背景图的效果 更多请点击我的博客 推荐最全面的vue和微信小程序的区别
|
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |