微信小程序怎样加背景图片

156 阅读 0 评论 103 点赞

我是靠谱客的博主耍酷蛋挞，这篇文章主要介绍微信小程序怎样加背景图片，现在分享给大家，希望可以做个参考。

经常为微信小程序设置颜色背景，突然发现一张好看的图片怎么把它设置为背景呢?

微信小程序怎样加背景图片

以下总结了三种方法：

1、wxss中通过background-image设置网络图片来添加背景图片；

微信小程序中background-image不能使用本地图片

推荐学习：小程序开发

复制代码background-image:url(https://xxxxxxxxxxxxxxxxxxxxxx)1
background-image:url(https://xxxxxxxxxxxxxxxxxxxxxx)
登录后复制

2、将图片转为Base64编码格式，然后使用background-image来添加背景图片；

复制代码background-image:url(转换之后的base64字符串)1
background-image:url(转换之后的base64字符串)
登录后复制

3、利用流布局，设置z-index层级，将image标签置于底层来添加背景图片。

复制代码//html
<view class="container">
  <image src='../image/1.jpg'></image>
  <view class='up'>
    我是一串字符串
  </view>
</view>
//css
.container{
  width: 100%;
  height: 600rpx;
  margin: 0;
  padding: 0;
  position: relative;
}
image{
  position: absolute;
  width: 100%;
  height: 600rpx;
}
.up{
  position: absolute;
  z-index: 1;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//html
<view class="container">
  <image src='../image/1.jpg'></image>
  <view class='up'>
    我是一串字符串
  </view>
</view>
//css
.container{
  width: 100%;
  height: 600rpx;
  margin: 0;
  padding: 0;
  position: relative;
}
image{
  position: absolute;
  width: 100%;
  height: 600rpx;
}
.up{
  position: absolute;
  z-index: 1;
}
登录后复制