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