小程序组件 —— 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 中进行下载(图片源自尚硅谷,非个人所有,无意冒犯);

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

相关推荐
七七软件开发3 小时前
直播 app 系统架构分析
java·python·小程序·系统架构·php
weixin_177297220698 小时前
旧物回收小程序:开启绿色生活新篇章
小程序·生活
weixin_177297220698 小时前
短剧小程序系统开发:引领影视消费新潮流
大数据·小程序
少恭写代码9 小时前
duxapp中主题系统是如何实现动态切换的
react native·小程序·移动开发·taro·duxapp
说私域21 小时前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的餐饮行业私域流量运营策略研究
人工智能·小程序·流量运营
2501_915909061 天前
Charles中文版使用教程 高效抓包与API调试常见问题处理
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张1 天前
iOS软件性能监控实战指南 开发到上线的完整流程解析
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld1 天前
剧本杀小程序系统开发:构建数字化剧本杀生态圈
大数据·小程序·剧本杀
徐礼昭|商派软件市场负责人3 天前
从“多、老、旧”到“4i焕新”:品牌官方商城(小程序/官网/APP···)的范式跃迁与增长再想象
小程序·商城系统·零售
胡西风_foxww3 天前
微信小程序转Vue2组件智能提示词
微信小程序·小程序·提示词·智能体·vue2组件