如何在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>
当然,内容也可以包含图像等。