微信小程序中背景图片无法显示的原因及解决办法

why 3066 2024-07-19

微信小程序背景图片显示不出来

开发小程序的时候,设置页面的背景,用到css代码:

1

2

3

4

5

6

.page__bd{

    width: 100%;

    height: 220px;

    background: url('../../assets/img/images.jpg') no-repeat;

    background-size: 100% 100%;

}

在调试工具上是显示的,但是扫面上传到手机上却显示不出来。

这是由于:background-image 只能用网络url或者base64图片编码 , 本地图片只能用 image标签src属性才行。当然 image标签src属性也可以使用网络url或者base64图片编码。

解决方法

下面通过 image 标签src属性设置,实现背景图显示

界面结构:

1

2

3

4

5

6

7

8

<view class=&#39;set-background&#39;>

    <image class=&#39;background-image&#39; src=&#39;{{item.countryPic}}&#39;></image>

    <view class=&#39;background-content&#39;>

        <view class="set-background-avatar" background-size="cover">

            <image class="post-specific-image" src="{{item.picture}}"></image>

        </view>

    </view>

</view>

wxss样式:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

.set-background {

    display: flex;

    flex-direction: column;

    align-items: center;

    height: 150px;

}

.set-background-avatar {

    width: 220px;

    height: 150px;

}

.background-content {

    position: absolute;

    z-index: 1;

}

.background-image {

    width: 225px;

    height: 150px;

    opacity: 0.8;

}

.post-specific-image {

    width: 215px;

    height: 150px;

    vertical-align: middle;

}


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

上一篇:微信小程序新建页面的方法与步骤解析
下一篇:微信小程序错误码 47001 产生的缘由剖析
相关文章

 发表评论

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