微信小程序 背景图片设置
微信小程序设置背景图片时,有两种方法:
第一:直接在.wxss中中使用 “background-image:url()” 设置背景图片,但是这种加载背景图片的方法存在一个问题,就是所加载的图片只能是网络图片或base64图片,是不可以加载本地图片的。
但是使用base64图片也存在弊端,(1) base64 编码后比原图要大;(2)如果把大图片编码到 html / css 中,会造成后者体积明显增加,明显影响网页的打开速度。
本地图片转换成base64图片(转换网址):base64图片在线转换工具 - 站长工具
转换完成之后,复制base64码,添加到.wxss中的背景图片中,如下:
background-color:(网络图片地址);
background-color:(base64图片码);
第二:在.wxml中用<image src = "本地图片地址">,然后使用z-index将图片置于底层(z-index 值小的在底层)
//.wxml
<view class="container"><image src='../image/2.jpg'></image><view class='text'>为我设置背景图片</view>
</view>
//.wxss
.container{width: 100%;height: 600rpx;margin: 0;padding: 0;position: relative;
}
image{position: absolute;width: 100%;height: 600rpx;
}
.text{position: absolute;z-index: 1;
}
微信小程序 背景图片设置相关推荐
- 微信小程序背景图片设置和图片自适应宽高
微信小程序背景图片设置和图片自适应宽高 我们在开发过程中经常需要对一些元素设置图片为背景图片. 网络图片: .ServiceCenter{width: 100vw;height: 40vw;margi ...
- 关于微信小程序背景图片设置
微信小程序在 .wxss文件中不允许设置background-image :url('/img/bg.png');解决方法有如下两种 一:在 .wxss文件中设置背景图片时使用base64 网址:ht ...
- 微信小程序背景图片全屏显示
微信小程序背景图片全屏显示 很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
- 微信小程序背景图片完全覆盖显示
微信小程序中,背景图片全屏 在微信小程序中需要设置背景图片全屏,这里用到css的知识我们可以: page { overflow:hidden; position:fixed; background-i ...
- 微信小程序背景图设置不生效的问题
技术栈: unIAPP + uview 组件库 开发微信小程序时候发现设置背景图片不生效 ,查资料得知,背景图需要使用网络地址或者base64格式 解决方法如下 思路 使用定位实现 父盒子使用相对定位 ...
- 微信小程序 — 背景图片实现。
如图微信小程序背景色.上面放文字如何实现此效果.背景色设置css样式是position: relative; 文字设置css样式position: absolute; 布局wxml: <view ...
- 微信小程序背景图片不显示
最近学着写了一个微信小程序,可是总是是加载不出背景图片.这里先描述一下问题. 用下面这种办法声明的背景图片在本机和手机上都无法显示. .container { height: 100%; displa ...
- 微信小程序背景图片background无法在手机端显示问题解决方案
之前做过一个小程序项目,页面中有背景图片,使用web开发工具调试时候背景图片能正常显示,使用真机调试及发布线上版本的时候图片不显示,刚开始以为是图片显示路径问题,后面问啦度娘后才发现微信小程序不支持背 ...
- 微信小程序 背景图片base64_微信小程序背景图片显示不出来
开发小程序的时候,设置页面的背景,用到css代码:.page__bd{ width: 100%; height: 220px; background: url('../../assets/img/im ...
- 微信小程序背景图片真机不显示问题
问题描述 : 开发者工具上<view style="background-image: url(图片路径);"></view>可以正常显示 但是真机预览,不 ...
最新文章
- 微信公众平台开发 OAuth2.0网页授权认证
- LeetCode18.四数之和 JavaScript
- SqlServer安装出错解决办法
- PgSQL · 最佳实践 · CPU满问题处理
- Beta 冲刺(3/7)
- 光耀卡服务器维修,3月28日服务器更新维护公告
- python+OpenCV图像处理(一)读取、复制、显示、保存
- 用手刻出计算机系统,一种计算机模拟手工雕刻制版的方法
- Ubuntu下安装qt57creator-plugin-ros,在QT中进行ROS开发(亲测有效)
- zuul业务检查相关模块
- golang ide 下载
- OfficeScan5.58升级到7.38
- 产品读书《产品经理面试攻略》
- Android 自定义锁屏_分享一款MIUI10精致主题,多种时间样式可选,可自定义字体颜色...
- 苹果cms漫画小说模板
- multisim红绿灯元器件在哪里_基于Multisim的红绿灯控制器仿真实现
- asp.net 微信jsapi支付
- PHP公众号群发用户过多,微信运营:为什么有的微信公众号没有群发限制,可以多次群发图文?...
- 电容笔哪个厂家的产品比较好?苹果平板的电容笔推荐
- 世界杯赛场上,大数据在奔跑