html - 单个响应图像上的多个响应图像?

标签 html css

我正在尝试创建具有多个 map 指针 (7) 的 map 。

我已经设法使用以下代码将它们置于正确的位置。

  <div style="position:relative; left: 0; top: 0;">
              <img src="images/JCCareas.png"  class="img-responsive" style="position:relative; left: 0; top: 0;" alt="Map" />
              <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 375px; top: 455px;" alt="target Solihull" title="Solihull"/>
              <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 320px; top: 250px;" alt="target Sheldon"/>
              <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 490px; top: 520px;" alt="target Knowle"/>
              <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 290px; top: 365px;" alt="target Olton"/>
              <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 575px; top: 390px;" alt="target Hampton-In-Arden"/>
              <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 560px; top: 80px;" alt="target Coleshill"/>
              <img src="images/JCCtarget.png" class="img-responsive" style="position:absolute; left: 460px; top: 215px;" alt="target Marston Green"/>
   </div>

map 是响应式的,但 map 标记不是我已经在 css 中尝试了几种方法,但我真的很难让它工作。

我尝试过的 CSS:

#under-image {
position: relative;
display: inline;
}
#over-image {
position:absolute;
left:33%;
top:43%;
max-width: 10%;
}

如有任何帮助,我们将不胜感激。

最佳答案

尝试这种方式 top & left position in %

.img1{left: 28%;
    position: absolute;
    top: 49%;
}
.img2{left: 32%;
    position: absolute;
    top: 87%;
}

关于html - 单个响应图像上的多个响应图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38524779/

相关文章:

html - 按钮的背景颜色在移动设备上发生变化

html - 当元素的宽度大于视口(viewport)的宽度时......

css - 为什么我的内容溢出我的容器 div?

html - :before && :after pseudo elements not showing Firefox

html - Bootstrap 基本网格布局冲突

html - 媒体查询根本不起作用

css - 如何在 HTML 中实现带有页眉布局的 ScrollView

后代的 CSS 选择器,直到遇到某个标签

css - 悬停不同的 div 时更改背景

html - 异步图像加载jquery