微信小程序如何设置背景图片

问题描述

在微信小程序当我们使用本地图片作为背景图片的时候我们会参与以下问题。
代码：

.bg{width: 750rpx;height: 540rpx;background-image: url(../../images/head_bg.png);
}

在页面使用这个样式的时候小程序会报错。

解决方案

小程序背景图片无法直接使用本地图片。有4种解决方案：

使用image组件，在布局下面盖上一层图片。缺点：布局结构可读性不高。
将图片通过在线转化网站，转化成base64格式。缺点：base64内容太长了，影响样式代码阅读。
直接通过行内样式解决。缺点：代码看上去不够优雅。（最简单）
直接使用网络图片。缺点：需要放到服务器上。（最灵活）

建议使用第4种方法解决，虽然首次操作会有点麻烦，但是这样可以增加灵活度后续可以不发版本直接替换远程图片。

如果是公司都有服务器放一下就好了。但是我们是独立开发，服务器怎么办解决？别忘了，其实我们可以将图片放在云开发的云存储里面会自动生成在线图片链接。

放在云存储上

进入云开发控制台
进入云存储空间
拖拽图片到云存储空间，不勾选任何配置，点击确定即可上传成功了
点击文件名称，复制文件地址

CSS代码：

.head-bg{width: 750rpx;height: 540rpx;background-image: url('https://xxxxxxxxxx.tcb.qcloud.la/head_bg.png');background-size: 100% 100%;
}

WXML代码

<view><!-- 头部 --><view class="head-bg" ><!-- 省略无关代码 --></view>
</view>

行内样式

当然如果实际业务需求没有替换图片的需求也可以使用第3个方案，这个是最省事的方案。代码如下：

<view><!-- 头部 --><view style="background-image: url(../../../../images/head_bg.png);background-size: 100% 100%;" ><!-- 省略无关代码 -->    </view>
</view>

Base64编码格式

第2个方案，Base64编码格式，先将图片转化成base64编码。点击传送到base64图片在线转换工具

background-image:url('base64编码')

用内容覆盖图片

第1个方案，用内容覆盖图片
wxml代码

<view class="container"><image src='../image/head_bg.png'></image><view class='content'>我是内容</view>
</view>

wxss代码

.container{width: 100%;height: 600rpx;margin: 0;padding: 0;position: relative;
}
image{position: absolute;width: 100%;height: 600rpx;
}
.content{position: absolute;z-index: 1;
}

微信小程序如何设置背景图片相关推荐

微信小程序如何设置背景图片（可行版！！）
1. 添加背景图(两步曲) (1).先在wxml里写一个块,块里包含一张图片即可,其实不加块也行,单独的一张图片就行了,自我代码习惯罢了(如下)  <view& ...
【干货】微信小程序如何设置背景图片
利用流布局,设置z-index层级,将image标签置于底层 //html <view class="container"><image src='../imag ...
微信小程序background设置背景图片不能用本地图片
转载于:https://my.oschina.net/u/3512111/blog/1031402
微信小程序开发——设置默认图片、错误加载图片
wxml: <image src='{{imgArr[index]==""?defaultImg:imgList[index]}}' binderror="erro ...
微信小程序开发：背景图片设置
开发微信小程序时,不能直接在wxss文件里引用本地图片,运行时会报错:"本地资源图片无法通过WXSS获取,可以使用网络图片,或者 base64,或者使用<image/>标签.&q ...
小程序view设置背景图片_小程序商城分销功能设置技巧设计方法
点击上方蓝字关注我们随着微信小程序上线的越来越多,要如何才能从中脱颖而出.与众不同呢?分销,就是个不错的选择. 分销功能,分销理论上可以无限级,目前政策支持包括自己在内的二级的分销.推荐用户可得到返 ...
学习笔记--微信小程序简单设置背景颜色
1.设置导航栏以下的颜色在app.awsx添加 page {background-color: #ECC0A8; } 2.设置导航栏及以上的颜色在app.json修改"navigatio ...
微信小程序动态设置背景
wx.setBackgroundColor(Object object) 支持版本 >= 2.1.0 动态设置窗口的背景色 wx.setBackgroundColor({backgroundCo ...
PHP怎么设置字体走马灯效果,微信小程序怎么设置背景颜色渐变以及字体走马灯效果（高考倒计时）...
效果图: 图1 图2 一.背景颜色渐变 1.wxml文件高考广播:距2020高考仅剩{{countdown}}天 2.wxss文件 .Broadcast{ position:relative; ri ...