微信小程序中设置背景图片的小坑

微信小程序设置背景图片有好几种方法,可以在样式中用background-image设置,也可以直接在view容器中设置,今天我用了后面这种方法去设置背景图,然后发现了一些小坑,在这写出来提醒一下。
遇到的问题主要是在前面设置背景图image的样式的时候没有定义它自己的类选择器,而是沿用了父容器的类选择器,导致后面页面内容里的图片不受其父容器控制,直接变成了跟背景图一样的样式,如下图:
tbg.png是用到的页面的背景图,eg1.png是用到的页面内容里的图:
在这里插入图片描述
把eg1的图放进去,本来是要出现在空白盒子处的,但是直接跑到外面去了,成为了背景图:
在这里插入图片描述
这里是样式代码,可以看到背景图采用样式的方法是直接沿用父容器的类选择器:
在这里插入图片描述
然后这里内容里的图片设置宽高都没用,直接受控于上面的,变成了背景图
在这里插入图片描述
所以改正方法是在背景图image中设置它自己的类选择器,然后在这里面写样式就能够得到解决了:
在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值