小程序组件 —— 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.rhkb.cn/news/504020.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jenkins内修改allure报告名称

背景&#xff1a; 最近使用Jenkins搭建自动化测试环境时&#xff0c;使用Jenkins的allure插件生成的报告&#xff0c;一直显示默认ALLURE REPORT&#xff0c;想自定义成与项目关联的名称&#xff0c;如图所示&#xff0c;很明显自定义名称显得高大上些 本地修改方法&am…

关于物联网的基础知识(二)——物联网体系结构分层

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///计算机爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于物联网的基础知识&#xff08;二&a…

应急响应——Windows / Linux 排查笔记

一、基本思路流程 收集信息&#xff1a;收集客户信息和中毒主机信息&#xff0c;包括样本判断类型&#xff1a;判断是否是安全事件&#xff0c;何种安全事件&#xff0c;勒索、挖矿、断网、DoS 等等抑制范围&#xff1a;隔离使受害⾯不继续扩⼤深入分析&#xff1a;日志分析、…

Git撤销指定commit并更新远端仓库

Git撤销指定commit并更新远端仓库 一、撤销指定commit 1.首先执行git log 命令&#xff0c;查看git历史提交以及commit信息&#xff1a; 由于需要脱敏&#xff0c;所以截图可能看得马赛克比较多&#xff0c;需要关注的就是上面的commit后跟的id&#xff0c;以及HEAD当前指定…

C 语言奇幻之旅 - 第16篇:C 语言项目实战

目录 引言1. 项目规划1.1 需求分析与设计1.1.1 项目目标1.1.2 功能需求1.1.3 技术实现方案 2. 代码实现2.1 模块化编程2.1.1 学生信息模块2.1.2 成绩管理模块 2.2 调试与测试2.2.1 调试2.2.2 测试2.2.4 测试结果 3. 项目总结3.1 代码优化与重构3.1.1 代码优化3.1.2 代码重构 3.…

2025最新解决方案:新买的mac鼠标和这个触控板反向

solution1 &#xff1a;1.打开设置&#xff0c;搜索 触控 点击 自然滚动 ----->解决的是 触控板 但是还是解决不了鼠标反向的问题 solution1 ultra&#xff1a; 下载一个免费 且纯净的 软件 Scroll Reverser for macOS 这是给出的链接&#xff0c;非常简单&#xff0c;…

黄仁勋CES 2025演讲重点内容

黄仁勋CES 2025演讲重点内容 硬件产品发布 GeForce RTX 50系列GPU&#xff1a; 架构与性能提升&#xff1a;正式发布的新一代GeForce RTX 50系列GPU采用英伟达旗舰的Blackwell架构&#xff0c;这是自25年前引入可编程着色技术以来计算机图形领域最重大的创新。该系列显卡在图形…

机器学习免费使用的数据集及网站链接

机器学习领域存在许多可以免费使用的数据集&#xff0c;这些数据集来自于学习、研究、比赛等目的。 一、综合性数据集平台 1.Kaggle 网址&#xff1a;Kaggle 数据集https://www.kaggle.com/datasets Kaggle是一个数据科学竞赛和社区平台&#xff0c;提供了大量的数据集供用…

nodejs的降级

不使用nvm&#xff0c;直接使用zip包和手动配置环境变量。 下载相关的zip版本的&#xff0c; 解压相关文件&#xff0c;配置系统环境变量PATH&#xff0c;安装的其他的都不用修改 修改系统变量中的path值&#xff0c;重启下电脑 注意要重启idea&#xff0c;如果还是无效&…

ASP.NET Core 实现微服务 - Elastic APM

这次要给大家介绍的是Elastic APM &#xff0c;一款应用程序性能监控组件。APM 监控围绕对应用、服务、容器的健康监控&#xff0c;对接口的调用链、性能进行监控。在我们实施微服务后&#xff0c;由于复杂的业务逻辑&#xff0c;服务之间的调用会像蜘蛛网一样复杂。有了调用链…

自定义EasyCode模板生成CRUD

文章目录 1.生成步骤1.定义全局逻辑删除字段名称以及删除值和未删除值2.简单三层架构模板1.概览2.Req.java3.Vo.java4.Po.java5.Mapper.java6.Mapper.xml7.Service.java8.ServiceImpl.java9.Controller.java 3.通用配置生成模板1.概览2.PageInfo.java3.PageResult.java4.SunPag…

IOS开发如何从入门进阶到高级

针对iOS开发的学习&#xff0c;不同阶段应采取不同的学习方式&#xff0c;以实现高效提升.本文将iOS开发的学习分为入门、实战、进阶三个阶段&#xff0c;下面分别详细介绍. 一、学习社区 iOS开源中国社区 这个社区专注于iOS开发的开源项目分享与协作&#xff0c;汇集了大量开…

洛谷P1617————数字转英文

题目如下 思路&#xff1a;将1~9的英文和20~90的英文用字符串数组存储&#xff0c;把下标看作对应的数字进行输出&#xff0c;遇到0或连续多个0就输出“and”&#xff0c;定义l用来看枚举到哪一位了&#xff0c;如果是单独输入一个“0”&#xff0c;则直接输出zero然后结束。否…

Kubernetes集群架构

Kubernetes集群架构 Kubernetes 集群架构控制平面组件kube-apiserveretcdkube-schedulerkube-controller-managercloud-controller-manager 节点组件kubeletkebe-proxy&#xff08;可选&#xff09;容器运行时 插件DNSWeb UI&#xff08;Dashboard&#xff09;容器资源监控集群…

esp32开发笔记之一:esp32开发环境搭建vscode+ubuntu

最近想用esp32做一个物联网项目&#xff0c;踩坑N个终于有点心得&#xff0c;写下来避免和我一样的小白踩无谓的坑。 写在前面&#xff1a; 第一&#xff0c;大家一定要用linux系统作为编译工具&#xff0c;速度上是windows无法比的&#xff0c;不要因为不熟悉linux而选择win…

探索大型语言模型新架构:从 MoE 到 MoA

探索大型语言模型新架构&#xff1a;从 MoE 到 MoA 当前&#xff0c;商业科技公司纷纷投身于一场激烈的竞赛&#xff0c;不断扩大语言模型的规模&#xff0c;并为其注入海量的高质量数据&#xff0c;试图逐步提升模型的准确性。然而&#xff0c;这种看似顺理成章的发展路径逐渐…

数据结构:LinkedList与链表—面试题(三)

目录 1、移除链表元素 2、反转链表 3、链表的中间结点 4、返回倒数第k个结点 5、合并两个有序链表 1、移除链表元素 习题链接https://leetcode.cn/problems/remove-linked-list-elements/description/ 描述&#xff1a;给你一个链表的头节点 head 和一个整数 val &#xff…

AI赋能R-Meta分析核心技术:从热点挖掘到高级模型、助力高效科研与论文发表

Meta分析是针对某一科研问题&#xff0c;根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法&#xff0c;对来源不同的研究成果进行收集、合并及定量统计分析的方法&#xff0c;现已广泛应用于农林生态&#xff0c;资源环境等方面&#xff0c;成为Science、Nature论文的…

LAMP搭建

LAMP搭建 引子&#xff1a;本篇文章为LAMP的搭建流程&#xff0c;其中L&#xff08;Ubuntu&#xff09;、A&#xff08;Apache&#xff09;、M&#xff08;Mysql&#xff09;、P&#xff08;PHP&#xff09;。 一、L → Ubuntu Step 1&#xff1a;在Vmware Workstation中使…

基于高斯混合模型的数据分析及其延伸应用(具体代码分析)

一、代码分析 &#xff08;一&#xff09;清除工作区和命令行窗口 clear; clc;clear;&#xff1a;该命令用于清除 MATLAB 工作区中的所有变量&#xff0c;确保代码运行环境的清洁&#xff0c;避免之前遗留的变量对当前代码运行产生干扰。例如&#xff0c;如果之前运行的代码中…