uniapp一张图片在另一张图片上面

一般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之外，还必须把在上面的图片的代码写在前面。

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

uniapp一张图片在另一张图片上面相关推荐

用ffmpeg把gif动图分离成多张图片和ffmpeg多张图片合成gif动图
用ffmpeg把gif动图分离成多张图片和ffmpeg多张图片合成gif动图(20190214) 文章目录: 一.ffmpeg把gif动图分离成多张图片二.ffmpeg多张图片合成gif动图三.把 ...
5_python将多张图片显示在一张图片上（20181218）
python将多张图片显示在一张图片上 1.用`pyplot`将多张图片显示在一张图片上 2.用`matplotlib`将多张图片显示在一张图片上 1.用pyplot将多张图片显示在一张图片上 pyl ...
Css Sprites 多张图片整合在一张图片上
CSS Sprites原理: CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","backgro ...
Python实现将一张图片放到另一张图片指定的位置上并合成一张图
Python实现将一张图片放到另一张图片指定的位置上并合成一张图 # -*- coding: utf-8 -*- # by:Apsinc # time:2019年12月10日 #Python实现将一张 ...
OpenGL（十六）——Qt OpenGL融合(将两张图片叠合成一张图片)
OpenGL(十六)--Qt OpenGL融合(将两张图片叠合成一张图片) 一.场景在常用的项目场景中,我们经常会遇到将两个图片合在一起变成一张图片,这时候就会有前后之分,特别是两个物体合在一起的时 ...
如何把几张图片整合到一张图片？
如何把几张图片整合到一张图片?整合图片,也就是把几张图片拼接到一起,关于这样的方法,我想各位小伙伴或多或少都有一些自己的整合方法,鉴于每一种方法的转换效果和效率不同,可能有些小伙伴不再满足自己所使用的 ...
使用canvas将多张图片截取拼接成一张图片
使用canvas将多张图片截取拼接成一张图片业务场景最近在做一个截取视频图片并拼接的小工具,其中就有个功能需要将多张图片截取拼接成一张图片的需求上面就是将几张图片截取拼接成一张图片的效果图实现 ...
uniapp怎么使用canvas把两张图片合并成一张图片
首先,在你的 vue 组件中引入 uni-canvas: <template><view class="canvas-container"><uni- ...
滑动轮播图实现最后一张图片无缝衔接第一张图片
原理:使用insertBefore和insertAfter方法调整图片顺序. 测试:firefox/chrome/IE11正常已知不足:每次播放均使用了一次insertBefore和insertAf ...

uniapp一张图片在另一张图片上面

uniapp一张图片在另一张图片上面相关推荐

最新文章

热门文章