uni-app 中使用背景图片

最新推荐文章于 2025-02-21 13:14:49 发布

瞭月

最新推荐文章于 2025-02-21 13:14:49 发布

阅读量9.8k

点赞数 5

分类专栏： uni-app css 文章标签： css3 vue.js html 前端 uni-app

本文链接：https://blog.csdn.net/haplant/article/details/125054042

版权

10 篇文章

订阅专栏

3 篇文章

订阅专栏

在uni-app中设置背景图片时，遇到微信小程序本地资源图片无法通过WXSS获取的问题。本文提供了一种解决方案，即使用image标签代替CSS，通过设置样式实现全屏背景效果。这种方法适用于H5和微信小程序，避免了base64转换和网络图片的配置复杂性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文同步发布在：uni-app 中使用背景图片

看到这个标题的时候，可能有人会问，uni-app 中使用背景图片不是很简单的事情，直接使用 css 就可以了。

没错，如果不考虑多端兼容性的问题，使用起来很简单，如下：

background-image: url(../../static/images/bg.png);
background-size: 100% 100%;
background-position: 50% 50%;
background-repeat: no-repeat;

这样在在 H5 上使用没啥问题，但是在微信小程序中运行会发现报如下错误：

pages/***.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签

这边说的很明白，提供了3种解决方式，笔者推荐使用 image 标签。因为base64还需要本地转换，比较麻烦；而使用网络图片对不同环境需要不同配置。

下面就简单介绍使用 image 标签的方式。

给需要设置背景图片的组件增加样式：

position: relative;
z-index: 0; // 支付宝小程序下背景不生效时，可以加上这个

再在该组件中插入 image 组件：

<image class="image-bg" src="/static/images/bg.png"/>

在 App.vue 中加入 image-bg 样式：

.image-bg {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

OK，大功告成~~~。

本文同步发布在：uni-app 中使用背景图片