如何在HTML中进行图片叠加(类似Google Map顶部的标记)?

时间:2020-03-06 14:25:07  来源:igfitidea点击:

任何人都知道如何在HTML中进行图片叠加或者叠加显示吗?效果将类似于在Google Map上显示的标记/图标,用户可以指定第二张图片的坐标显示在第一张图片上。

谢谢。

解决方案

使用具有z-index属性的DIV标签和CSS绝对定位。

http://www.w3.org/TR/CSS2/visuren.html

CSS层。

我们可以使用<div>容器将内容分成多层。因此,div容器必须绝对定位并标有z-index。例如:

<div style="position: absolute; z-index:100">This is in background</div> 
<div style="position: absolute; z-index:5000">This is in foreground</div>

当然,内容也可以包含图像等。