微信小程序之页面样式以及背景图片显示问题
##一、背景
下面这些都是在开发的过程中,记录下来的笔记。
##二、样式及背景图片显示问题
1、修改单个页面的背景色: 在页面的wxss里面加上这句代码:
page{ background-color: lightcyan; }
2、小程序中的颜色设置
//颜色不要加引号,也可以直接是英文 border-top:1rpx solid #e5e5e5;
3、小程序中的rpx和px的区别
4、关于背景图片
本地资源无法通过 WXSS 获取 background-image:可以使用网络图片,或者 base64,或者使用标签
但是可以在wxml中,通过style设置
<view class=bg style="background-image: url(../../img/bg.png);">
也可以访问网络图片,比如把图片上传到阿里的OSS,直接使用阿里返回的路径也可以
5、关于小程序中的flex布局,可以参考阮一峰的文章:
6、关于本地背景图片在手机上无法显示的问题
这个问题在网上百度了一下,大多数人都建议,不要用本地资源。最好是用网络资源,也就是把图片上传到OSS上,访问。
我这边是把图片上传到阿里云的OSS,返回图片的网络路径,直接使用即可。
<view class=bg style="background-image: url(http://pzsh.oss-cn-shanghai.aliyuncs.com/xxx/xx.png);background-size: cover">
这里的background-size: cover是为了让图片等比例缩放,铺满整个屏幕。
end