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

前言:

一开始打算用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；}这样我们也可以达到背景图的效果。

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

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

• 开发小程序时如何设置背景图片(微信小程序图片背景)
• 一种设置小程序背景图片的方法

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