uni-app 中使用背景图片

最新推荐文章于 2024-07-03 15:34:14 发布

清风不是明月

最新推荐文章于 2024-07-03 15:34:14 发布

阅读量6k

点赞数 2

分类专栏：前端_UI 框架文章标签： uni-app 微信小程序小程序

本文链接：https://blog.csdn.net/weixin_55806809/article/details/126830021

版权

前端_UI 框架专栏收录该内容

18 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在uni-app中正确使用背景图片，包括在H5页面遇到的问题解决方案，以及在微信小程序中通过网络图片、base64和标签的配置。重点讲解了小程序中使用标签设置背景的方法和常见技巧。

摘要由CSDN通过智能技术生成

uni-app 中使用背景图片
一 : H5 上使用(但是在微信小程序中报错)

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

二 : 微信小程序中可以
1,使用网络图片(对不同环境需要不同配置)，
2,或者 base64(需要本地转换)，
3,或者使用标签(推荐使用)

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

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

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