时间戳

首页 > 解决方案 > 将小图像放在平移图像背景上

html - 将小图像放在平移图像背景上

问题描述

我在 div 中有一个平移图像。在这个作为背景的平移图像上，我有一个带有指向其他页面的链接的 html 地图区域。这行得通。无论如何，现在我想在这个平移背景上放一个小图像。我已经尝试过使用 css“位置：相对”并且它可以工作..但是地图区域中的链接还不能点击。如果我删除平移图像中的“位置：相对”，则链接有效。我怎样才能解决这个问题？我需要该链接有效..但我也想要平移图像上的图像（在背景中）。

<img src='/images/mappa/atlas.jpg' class='panning' usemap="#Map" style="position:relative!important;z-index:-1000!important;">

   <map name="Map" id="Map">
   <area alt="Arena" title="Arena" href="/script/chat.php?luogo=Arena" shape="rect" coords="513,434,531,452"/>
   <area alt="Isola Inesplorata" title="Isola Inesplorata" href="/script/chat.php?luogo=Isola_Inesplorata" coords="204,77,12" shape="circle">
   </map>

<img src="/images/minions/8.png" style="margin-top:<?php echo $y;?>;margin-left:<?php echo $x;?>;position:relative!important;z-index:-700!important;">

显然地图代码要长得多，我只是把必要的例子。我已经尝试将小图像的代码移动到平移背景的上方或下方，这无关紧要。

我把css直接放在style里面是为了让你更好的理解我输入的内容。

标签： htmlcssimage

解决方案

解决了。我使用了这个解决方案：

1）我创建了一个新的 div 容器，其相对位置和 z-index 具有负值（例如：-1000）。2）我已将 z-index 设置为具有正值和相对位置的小图像。

现在我得到了图像和链接。

推荐阅读