将本地图片用作小程序背景的有效方式

why 42 2024-07-02

怎么把本地图片当作小程序背景

我们知道在微信小程序中是不能直接给view设置本地图片的。那么我们怎么解决这个问题呢?

解决方法如下:

1、使用网络图片

2、使用base64格式

3、使用image来装载本地的图片,然后作为界面背景

前面两种都很简单,下面我们重点来讲讲第三种。一般大家的苦恼都是这么把imageview放到界面的最下面。那么下面直接上代码
wxml

1

2

3

4

5

<view class="root">

  <image class=&#39;background-image&#39; src=&#39;../res/login_bg.png&#39; mode="aspectFill"></image>

  <view class="content">

  </view>

</view>

wxss

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.root {

   width: 100%;

    height: 100%;

    background-color: #70c7da;

    position: relative;

}

 

.background-image{

   height : 100%;

    position: absolute;

    width: 100%;

    left: 0px;

    top: 0px;

}

.content{

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0px;

    top: 0px;

}

好了,搞定。只要用相对布局,就可以实现了。类似android的相对布局。现在只要把内容全部写道content中就行了。


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

上一篇:小程序分享至朋友圈的可行办法与操作
下一篇:详细解析注册小程序账号的完整流程
相关文章

 发表评论

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