微信小程序添加背景图片的详细步骤和方法

why 4954 2024-07-23

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

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

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

以下总结了三种方法:

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

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


1

background-image:url(https://xxxxxxxxxxxxxxxxxxxxxx)

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

1

background-image:url(转换之后的base64字符串)

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

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=&#39;../image/1.jpg&#39;></image>

  <view class=&#39;up&#39;>

    我是一串字符串

  </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;

}

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序实现点击传值的具体方式解析
下一篇:微信小程序进行手机预览的操作流程和要点
相关文章

 发表评论

暂时没有评论,来抢沙发吧~