当前位置: 首页 > article >正文

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

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

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

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

<view class="bg-image"></view>

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

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

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


http://www.kler.cn/a/467085.html

相关文章:

  • ESP8266+STM32+阿里云保姆级教程(AT指令+MQTT)
  • Java虚拟机(Java Virtual Machine,JVM)
  • js -音频变音(听不出说话的人是谁)
  • Rust中的Option枚举快速入门
  • LabVIEW在反馈控制时如何解决带约束的控制问题
  • [Qt] 输入控件 | Line | Text | Combo | Spin | Date | Dial | Slider
  • xdoj 判断字符串子串
  • Cocos2dx Lua绑定生成中间文件时参数类型与源码类型不匹配
  • 综合课程设计I报告题目: 血氧仪设计
  • SCT12A0,一款2.7V-14V Vin、30W全集成同步升压转换器
  • 【hustoj注意事项】函数返回值问题
  • asp.net core 属性路由和约定路由
  • 用Redis缓存数据、SpringCache
  • lovelyAIMaster - 在windows任何地方调用AI进行输入
  • 如何批量注册Outlook邮箱账号并防止关联?
  • MySQL(五)MySQL图形化工具-Navicat
  • Oracle 多租户架构简介
  • 深入浅出 Pytest:自动化测试的最佳实践 pytest教程 程序测试 单元化测试
  • 面向对象分析和设计OOA/D,UML,GRASP
  • vue代理问题
  • 对计网大题的一些指正(中间介绍一下CDM的原理和应用)
  • 51单片机——按键实验
  • YOLOv10-1.1部分代码阅读笔记-autobackend.py
  • python3GUI--智慧交通监控与管理系统 By:PyQt5
  • Chromebook 的 4 个最佳变声器
  • Dart语言的软件工程