一、图片引用

wxss中直接引用本地图片会报错：

url(../../images/login/bg.png-do-not-use-local-path-./pages/login/login.wxss&15&20)

使用本地图片的话，需要在行内样式中引用

<view style="background:url('../../images/login/bg.png')"></view>
...
<image class="bg" src="/images/login/bg.png"></image>

，外部wxss只能引用线上图片（需要上传服务器后引用）

tips：数据量小的话这里建议使用小程序自带的云存储，

续费说明 | 微信开放文档

二、样式处理

背景图片既可以直接在最外层view使用background，也可以在relative的外层view内使用absolute的image标签（记得宽高设置100%）

【实战】前端必会 —— 微信小程序引入背景图相关推荐

python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
微信小程序设置背景图的几种方式
微信小程序设置背景图的几种方式原本在html中可以通过background-image来设置背景图片 .page {width: 100%;height: 100%;background-size: ...
微信小程序 - 设置背景图
本来就是简简单单设置一个背景图,非常简单的功能,也就一行代码的事儿,但是没想到竟然另有蹊跷,故此记录一波 ~ 正常设置:给整个页面设置背景图片 background-image: url ('本地图片 ...
微信小程序设置背景图铺满顶部
由于微信小程序自带顶部导航栏,导致我们设置背景图时总是无法铺满顶部,其实想要铺满顶部只需要改变一个属性即可.将navigationStyle的默认属性修改为custom 在微信小程序需要设置背景图的文 ...
微信小程序音乐背景图360旋转+点击播放暂停同步音乐播放暂停。
wxml部分 wxss部分 js部分
微信小程序设置背景图
在网上查了下面的方法 ,然而并不能行.... 经测试使用绝对定位是可以完成的 .wxml .wxss 这样就可以做到平铺填充整个view,做到背景图的效果! 转载于:https://juejin.im ...
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码（阿里云）
发送手机短信验证码前言一. 准备工作二. 配置三. 实战代码(仅仅是后台代码,前端传入手机号) 总结前言在网站和移动应用中利用短信验证码进行信息确认是最常用的验证手段.随着短信验证码的技术 ...
微信小程序----引入外部字体库iconfont的图标
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 直接使用阿里巴巴的网络路径选择iconfont图标官网:阿里巴巴矢量字体库步骤:阿里巴巴 ...
微信小程序引入promise报错
微信小程序引入 promise 相关库及 Android 真机报错解决方案如果你恰巧使用的是 bluebird ,又恰巧你只是在模拟器上测试或者你的真机是iOS系统,你有必看看到最后,因为在Andr ...

【实战】前端必会 —— 微信小程序引入背景图

文章目录

一、图片引用

二、样式处理

【实战】前端必会 —— 微信小程序引入背景图相关推荐

最新文章

热门文章