关键帧 div 上的图像映射答案

【问题标题】：Image map on a keyframe div关键帧 div 上的图像映射
【发布时间】：2015-01-23 19:16:34
【问题描述】：

我有一个包含多个坐标的图像地图。但是，当我在上面放置一个关键帧 div (clouds) 时，这个不起作用，因为动画覆盖了地图。最后一个 div 是一个动画，一些云从图像上掠过。

html代码为：

    .column-right img {
      min-width: 100%;
      min-height: 100%;
      overflow: hidden;
      position: absolute;
    }
    .column-right .clouds {
      animation: cloud-move 25s linear 2s infinite;
      background-image: url("../img/sobre_mi/clouds.png");
      background-size: cover;
      height: 100%;
      position: absolute;
      width: 100%;
      z-index: 5;
    }
    map {
      position: absolute;
      z-index: 50;
    }

<img src="img/sobre_mi/map.jpg" alt="Map" border="0" usemap="#Map" />
<map name="Map">
  <area shape="circle" coords="970,247,90" href="#" alt="Córdoba">
</map>
<div class="clouds"></div>

我的问题是，有没有什么方法可以让图像映射在动画开发过程中发挥作用？

我已经做了一些测试，比如在地图和区域标签上使用 z-index，以便在 div clouds 前面，但没有工作。

【问题讨论】：

标签： html css dictionary imagemap

【解决方案1】：

您能否将“地图”的图像放在 z-index 0 上，然后将云放在顶部，然后将透明的 gif/png 图像绝对放置在具有调用 .所以动画在下面但仍然可见。只是一个想法......

【讨论】：