18910140161

微信小程序引入背景图的三种方法

顺晟科技

2021-06-16 10:56:56

1749

在wxss文件中,使用background-image : URL();设置背景图片,报错,提示

pages/me/me中的本地资源图片。wxss无法通过WXSS获得,所以可以使用网络图片、base64或image/tag。

在小程序中设置区域背景图像时,存在无法在wxss文件中获取本地资源的问题。

错误提示中也给出了解决方案

1.网络图片

使用背景图片时,请使用网络图片

后台-image : URL(https://www . oicqzone.com/uploads/news/201904040213501000 . jpg);

2、base64

Base64编码,在本网站转换,并将转换后的字符串放入url。格式:

Background-image: url(转换后的base64字符串);

如果您多次使用它,您可以设置全局变量并在js文件中引用它们

3.图像/标签

使用流程布局,设置z索引级别,并将图像/标签放在底部

具体代码如下:wxss文件。wxss文件。标题-容器{

背景-image: url(././image/me/liqingbo . png);

背景-repeat : no-repeat;

背景尺寸: ;

-moz-background-size : ;

}

但是,这里推荐种方法。现在,对于真实的机器测试,第二种和第三种方法有时会报告错误或不显示图片。

我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航