首页 > 上网技巧 > 电脑小技巧 > 微信小程序引入背景图的三种方法

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

时间:2019-05-01 09:32 作者:QQ地带 我要评论

在wxss文件中,使用background-image: url();设置背景图,报错,提示
pages/me/me.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签
小程序中设置区域背景图,对于在wxss文件中,存在本地资源无法获取的问题。
 
 
 
解决方案在错误提示中也给出来了
 
 
 
1、网络图片
使用背景图片的时候,采用网络图片
 
background-image: url(https://www.oicqzone.com/uploads/news/201904040213501000.jpg);
 
2、base64
base64编码,在这个网站进行转换,转换之后的得到的字符串放入url中。格式:
 
background-image: url(转换之后的base64字符串);
多次使用的话,可以设置全局变量,在js文件中进行引用
 
 
3、<image/>标签
利用流布局,设置z-index层级,将<image/>标签置于底层
 
具体代码如下:
 
 
 
.wxss文件
 
.wxss文件
.header-container {
  background-image: url(../../image/me/liqingbo.png);
  background-repeat:no-repeat;
  background-size:100% 100%;
  -moz-background-size:100% 100%;
}
 
 
不过这里推荐使用第一种方式,现在真机测试,第二和第三种方式有时候会都报错或者不显示图片。
 

标签: 微信小程序
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告