小程序组件 —— 30 组件 - 背景图片的使用

在编写小程序的样式文件时,可以使用 background-image 属性来设置元素的背景图像;但是这个属性在微信小程序中使用时存在坑;

注意事项:微信小程序中的 background-iamge 不支持本地路径!需要使用网络图片,或者 base64,或者使用 image 组件;

打开微信开发者工具,在 index.wxml 文件最底部添加一行代码:

typescript 复制代码
<view class="bg-image"></view>

在 index.scss 中添加样式进行测试:

css 复制代码
.bg-image{
  height: 400rpx;
  // 小程序背景图的地址不能写本地路径,写本地路径的图片无法展示
  background-image: url(../../assets/bgimage.png);
  // 可以使用网络图片代替本地图片
  background-image: url(http://8.131.91.46:6677/bgimage.png);
  // 也可以将本地图片转为 base64 进行展示,由于 base64 数据太长,这里不进行演示
  background-image: url(data:image/png;base64,iVB*****);
}

对应的图片,可以从 gitCode 中进行下载(图片源自尚硅谷,非个人所有,无意冒犯);

参考视频:尚硅谷微信小程序开发教程

相关推荐
兰亭妙微7 小时前
从线到机:AI 与多模态交互如何重塑 B 端与 App 界面设计
人工智能·小程序·交互·用户体验设计公司
青青子衿越8 小时前
微信小程序web-view嵌套H5,小程序与H5通信
前端·微信小程序·小程序
!win !13 小时前
uni-app支付宝端彻底禁掉下拉刷新效果
前端·小程序·uni-app
软希网分享源码18 小时前
校园跑腿小程序源码 | 跑腿便利店小程序(源码下载)
小程序·跑腿便利店小程序·校园跑腿小程序源码
说私域1 天前
基于开源 AI 智能名片链动 2+1 模式 S2B2C 商城小程序的新开非连锁品牌店开业引流策略研究
人工智能·小程序·开源
KlDMEO1 天前
DrissionPage 能控制火狐或edge吗
其他·微信小程序·小程序
柯北(jvxiao)1 天前
爆肝三周,我终于上线了自己的第一个小程序
微信小程序·小程序
weixin_177297220691 天前
剧本杀APP系统开发:打造多元化娱乐生态的先锋力量
小程序·娱乐·剧本杀
weixin_177297220691 天前
扭蛋机小程序系统开发:连接线上线下娱乐的新桥梁
小程序·娱乐·扭蛋机·盲盒
毕设源码-赖学姐1 天前
【开题答辩全过程】以 交通管理乱停车小程序的设计与实现为例,包含答辩的问题和答案
小程序