微信小程序如何设置背景图片(可行版!!)

1、 添加背景图(两步曲)

(1)、先在wxml里写一个块,块里包含一张图片即可,其实不加块也行,单独的一张图片就行了,自我代码习惯罢了(如下)

<!--背景图片-->
<view>
<image class="bg-image" mode="scaleToFill" src="/images/bg_1.png"></image>
</view>

(2)、在wxss里,咱们定义这个图片的规格就行了,那个块里面的”content”可以不去做任何处理(如下)

.bg-image
{ 
  width : 100%;
  height : 100%;  
  position: fixed;  
  z-index: -1;  
}

*解释:position据我的理解是,你要设置背景图,你肯定除了背景之外,还要有其他组件的,如果你就是想做个壁纸小程序的话,那你不用写这个,并且请你跳过后面的解释。

那这样,假如你有两个或多个组件,这里我们假设只有两个组件,第一个就是背景图,第二个也是个图片,这有两张图片,那你在wxml中写代码一般都是这样
在这里插入图片描述
欸,这样你去运行保存的话,他就会呈现出两个上下分布的块,并没有出现背景图的效果,这个时候,我们就加个posittion : flexd,让上面的背景随便伸缩到任意一个位置,不会呈现出区域化的问题了,并且还要加z-index:-1,这是为了使背景图这个块变成最底层,各种好看的页面都是一层一层的,而这种层数不管再多,你人眼都观察不出它的厚度的好嘛。

  • 33
    点赞
  • 72
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值