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

前言:

一开始打算用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 = login -box ； gt//本地图片< image src = # 39../../../static/images/log in _ BG . png # 39； gt lt/image gt； lt/view gt；wxss:

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

推荐:小程序开发教程以上是小程序背景图片设置方法的详细内容。更多请关注主机参考其他相关文章！

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

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

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