微信小程序背景图设置不生效的问题

最新推荐文章于 2025-05-10 10:22:41 发布

Are姜祁

最新推荐文章于 2025-05-10 10:22:41 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签：微信小程序 javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44079209/article/details/127899110

uniapp 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在微信小程序中有效设置背景图片的方法。通过使用定位技巧，将背景图作为子元素并设置适当的z-index值，可以成功实现背景图显示。文章提供了具体的代码示例。

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

技术栈： unIAPP + uview 组件库
开发微信小程序时候发现设置背景图片不生效，查资料得知，背景图需要使用网络地址或者base64格式
解决方法如下

思路使用定位实现
父盒子使用相对定位
子元素使用绝对定位
子元素z-index 设置为-1

		<view class="class_box">
		
				<image class="bgImg" src="../../static/other/PNG/商品基础信息栏@2x.png" mode=""></image>
					<view class="class_item">
					</view>
		</view>
<style>
	.class_box {
			position: relative;
			width: 700rpx;
			height: 260rpx;

			.bgImg {
				position: absolute;
				z-index: -1;
				width: 700rpx;
				height: 260rpx;
			}
		}
</style>