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

ops/2025/1/7 23:41:45/

在编写小程序的样式文件时,可以使用 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.ppmy.cn/ops/148296.html

相关文章

C语言 扫雷程序设计

目录 1.main函数 2.菜单打印menu函数 3.游戏game函数 4.宏定义 5.界面初始化 6.打印界面 7.设置雷 8.统计排查坐标周围雷的个数 9.排查雷 10.总代码 test.c代码 game.h代码 game.c代码 结语&#xff1a; 一个简单的扫雷游戏&#xff0c;通过宏定义可以修改行列的…

[极客大挑战 2019]Http 1

进入环境&#xff1a; 检查源码发现有一个链接&#xff0c;但是这里没有绑定&#xff0c;需要手动跳转&#xff0c;打开后&#xff0c;发现提示&#xff1a; 这里就是需要我们从https://Sycsecret.buuoj.cn来访问它 因此我们抓包&#xff0c;使用referer&#xff1a;服务器伪造…

node.js内置模块之---fs 模块

fs模块的作用 在 Node.js 中&#xff0c;fs&#xff08;文件系统&#xff09;模块提供了与文件系统交互的功能&#xff0c;允许你读取、写入、更新和删除文件&#xff0c;以及操作文件和目录。这个模块是 Node.js 的核心模块之一&#xff0c;主要用于服务器端处理文件系统相关的…

机器翻译

阿里云提供了强大的 机器翻译服务&#xff0c;名为 阿里云机器翻译&#xff08;Alibaba Cloud Machine Translation, MT&#xff09;。它利用人工智能技术&#xff0c;特别是自然语言处理&#xff08;NLP&#xff09;和深度学习模型&#xff0c;支持多语言间的高效翻译&#xf…

华为的数字化转型框架和数字化转型成熟度评估方法

2016年&#xff0c;华为公司数字化转型变革规划汇报通过&#xff0c;一系列的变革项目由变革指导委员会(Executive Steering Committee,ESC)完成立项。8年多来&#xff0c;华为数字化转型工作初步取得了一些成果&#xff0c;比如&#xff1a; 实现“销售收入翻番&#xff0c;但…

学英语学压测:01开源压测工具jmeter能干什么

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#xff1a;先看关键单词&#xff0c;再看英文&#xff0c;最后看中文总结&#xff0c;再回头看一遍英文原文&#xff0c;效果更佳&#xff01;&#xff01; 关键单词&#xff1a; simulate模拟/ˈsɪmjʊˌleɪt/concurrent并发的/…

AI知识库与用户行为分析:优化用户体验的深度洞察

在当今数字化时代&#xff0c;用户体验&#xff08;UX&#xff09;已成为衡量产品成功与否的关键指标之一。AI知识库作为智能客服系统的重要组成部分&#xff0c;不仅为用户提供快速、准确的信息检索服务&#xff0c;还通过用户行为分析&#xff0c;为产品优化提供了深度洞察。…

简单的spring boot tomcat版本升级

简单的spring boot tomcat版本升级 1. 需求 我们使用的springboot版本为2.3.8.RELEASE&#xff0c;对应的tomcat版本为9.0.41&#xff0c;公司tomcat对应版本发现攻击者可发送不完整的POST请求触发错误响应&#xff0c;从而可能导致获取其他用户先前请求的数据&#xff0c;造…