关于微信小程序背景图手机上加载不出来问题的解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于微信小程序背景图手机上加载不出来问题的解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.问题:平时在给背景图的时候大家的第一反应一定是在css中直接写background-image,直接就把图片当背景放在了那里，但是这样的方法在pc端还是可以的，在小程序端却存在着加载不出来的问题，现在我来给大家提供一个解决方法（插入图片的方法）

2.原理：一个大的父盒子，同时里面包含（1.要当背景的图片2.要在背景上显示的内容）

给背景图片绝对定位定在父盒子里面

给父盒子相对定位（子绝父相）：让你的背景图可以固定在父盒子里面

给里面要显示的内容相对定位，否则你将会看不到你将要显示的内容。

这样，给小程序加背景图在手机上显示不出来的问题就解决了

3.解决方法：运用绝对定位，相对定位的知识，直接在你想要加背景图的盒子前面插入图片，用<image>标签来实现，话不多说，直接上代码

<template>
	
		<view  style="position: relative;">
			<image src="../../static/photo/bgbalance.png" style="width: 692rpx; height: 276rpx;position: absolute;" mode=""></image>
			<view class="" style="padding: 83rpx 55rpx 0;position:relative;display:flex;flex-direction: column;">		
					<view class="" style="color: #fff;font-size:26rpx;">
							总余额(元)
					</view>
					<view class="" style="font-size: 67rpx;color: #fff;">
							5,864.64
					</view>		
			</view>
		</view>
	
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

运行的结果展示：

小程序background-image显示不出,微信小程序,小程序,html5,css3 文章来源地址https://www.toymoban.com/news/detail-757039.html