设定小程序背景图片的几种技巧

发布时间：2022-07-09 13:35:15 所属栏目：经验来源：互联网

导读：前言：一开始，打算在wxss文件中使用background-image:url()来设置背景图，但是却出现了报错了，提示：pages/me/me.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用image/标签小程序中设置区域背景图。对于在wxss文件中

　　前言：

　　一开始，打算在wxss文件中使用background-image:url()来设置背景图，但是却出现了报错了，提示：pages/me/me.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签小程序中设置区域背景图。对于在wxss文件中，存在本地资源无法获取的问题。

　　解决方案：

　　1、使用网络图片

　　我们可以把需要的背景图片上传到服务器上，然后使用背景图片地址。

　　如果我们需要动态改变背景图片，我们可以设置行内样式style绑定变量从而做到动态改变背景图片；

　　2、利用base64格式的图片

　　我们可以用base64的图片做到设置背景图片

　　在这里我推荐一个在线转换的base64图片格式的地址http://imgbase64.duoshitong.com/

　　选择图片会转换成base64格式的图片

　　复制里面的代码放到background: url(base64转换的代码);这样既可做到设置背景图片也不用放到服务器上

　　（学习视频分享：php视频教程）

　　3、利用image标签做到设置背景图片

　　思路：我们只要利用css中的z-index改变层级既可做到变成背景图的样子

　　看代码

　　wxml：

　　<view class = "login-box" >
　　   //本地图片
　　  <image src='../../../static/images/login_bg.png'></image>
　　</view>
　　wxss：

　　page{
　　 height: 100%;
　　 width: 100%;
　　}
　　.login-box {
　　  height: 100%;
　　}
　　
　　image {
　　  position: absolute;
　　  left: 0;
　　  bottom: 0;
　　  display: block;
　　  width: 100%;
　　  z-index: -999;
　　}
　　这样我们也可以做到背景图的效果。

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

什么是网站TTFB？优化	如何合理应用URL准则
CDN缓存是啥意思解析	为何要买云服务器？云