一种设置小程序背景图片方法

前言:

一开始打算用background-image:url()在wxss文件中设置背景图片，但是出现了错误。提示:pages/me/me.wxss中的本地资源图片无法通过wxss获取，所以我可以使用网络图片，base64，或者在标签小程序中设置区域背景图片。对于wxss文件，存在无法获取本地资源的问题。

解决方案:

1.使用网络图片

我们可以把需要的背景图片上传到服务器，然后使用背景图片地址。

如果需要动态改变背景图片，可以设置内嵌样式绑定变量来动态改变背景图片；

2.使用base64格式的图片

我们可以用base64图片来设置背景图片。

这里我推荐一个base64图片格式的在线转换地址http://imgbase64.duoshitong.com/.

所选图片将被转换为base64格式的图片。

复制里面的代码放在后台:url(base64转换代码)；这样就可以设置背景图片，不用放到服务器上。

(学习视频分享:php视频教程)

3、使用图像标签设置背景图片。

想法:我们可以在css中使用z-index来改变层次，它可以变成背景图片。

看看代码

wxml:

& ltview class = & quotlogin -box & quot；& gt//本地图片

页面{高度:100%；宽度:100%；}.login-box {高度:100%；} image { position:绝对；左:0；底部:0；显示:块；宽度:100%；z-指数:-999；}这样我们也可以达到背景图的效果。

相关推荐:小程序开发教程

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：一种设置小程序背景图片方法 https://zhujicankao.com/114869.html