关于微信小程序的背景图片问题

本文探讨了在wxss中使用background-image属性时遇到的问题,包括本地文件夹相对路径的限制,以及如何通过网络图片地址或base64图片解决。文章还提到了wxml中引用图片的方法,并建议在手机预览时注意显示差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • wxss中(background-image属性)
    • 使用本地文件夹相对路径(报错),官方对于小程序的这个属性解释为,在wx文件中无法获取本地资源,这里可以使用网络图片地址或者先将图片转化为base64图片后引用(base64在线转码工具)。针对于没有自己服务器的人,可以先将图片传入空间相册,然后打开图片后右键保存地址后使用,是哦那个的时候要注意,在手机上预览正常,但在开发者工具上无法显示。
  • wxml中引用
<view style = "background: url(url)"></view>

这种方法使用本地路径在开发者工具上显示正常,但在手机上无背景图片

  • 综上,应尽量使用网络图片。若是想整个页面均使用背景图片,则应使用属性选择器
page{
	background-image: url(url);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值