html - 关键帧 div 上的图像映射

Question

我有一个包含多个坐标的图像映射。但是，当我在上面放置一个关键帧 div (clouds) 时，这个不起作用，因为动画覆盖了 map 。最后一个 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>

我的问题是，有没有什么方法可以让图像映射在其上开发动画时正常工作？

我做了一些测试，比如在 map 和区域标签上玩 z-index 以便在 div clouds 前面但不起作用。

Answer 1

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