Question

我有一个带有几个坐标的图像映射。但是，当我在动画覆盖地图时放置关键帧div（clouds）时，这个不起作用。最后一个div是一个动画，一些云在图像上传递。

html代码是：

＆＃13;

    .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;
    }

＆＃13;

<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>

＆＃13;

我的问题是，有什么方法可以实现图像地图在动画开发过程中的作用吗？

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

Answer 1

你可以在z-index 0上放置'map'的图像，然后将云放在上面，然后将绝对的gif / png图像放置在具有调用的图像映射坐标的顶部。所以动画在下方但仍然可见。只是一个想法...

关键帧div上的图像映射

1 个答案: