一般css解决一张图片在另一张图片上面的问题:

<div>
	<img src="..." class="img1">
	<img src="..." class="img2">
</div>

css部分:

.img2{
	position:absolute;
	z-index:2;
}

原理就是设定position为非默认值,然后设定z-index的值调整图层就行了。
数值越大,图层越靠前(或者说在上面)

而在uniapp中,因为使用了组件image,所以处理的方法可能有区别。

<view class="title">
	<image class="title_img" src="/static/05Mines/MyInfoSet/background.png"></image>
	<image class="upload_pic" src="/static/05Mines/MyInfoSet/upload_pic.png"></image>
</view>

scss部分:

.title{
	.title_img{
		position: relative;
		width: 100vw;
		height: 54vw;
	}
	.upload_pic{
		position: absolute;
		width: 19vw;
		height: 19vw;
		margin: 13vw 41vw;
		z-index: 2;
	}
}

结果如下:

在这里插入图片描述
只显示了第一张图片,第二张图片没显示在第一张的上面,即使我设置了z-index:2。
这种方法无法达成目标。

现在,将两个image组件顺序换一下,结果如下:

<view class="title">
	<image class="upload_pic" src="/static/05Mines/MyInfoSet/upload_pic.png"></image>
	<image class="title_img" src="/static/05Mines/MyInfoSet/background.png"></image>
</view>

scss部分不变,显示结果如下:
在这里插入图片描述
能够达到目标,也就是说在uni-app里面,让一张图片在另一张图片上面,除了设定postion和z-index之外,还必须把在上面的图片的代码写在前面。

这个方法只能对症下药,背后原理没有细究,希望高手指点。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐