Z-index 透明图像

Question

我需要采用现有的横幅图像，作为图像的一部分，图像左侧有一个公司徽标，但整个横幅是一个图像。

现在我所追求的是一种在现有图像徽标上创建图层区域（透明/不可见）的方法，以便：

1. 仍然可以看到原始图像 &
2. 当您将鼠标悬停在覆盖下方徽标的分层区域上时，我想将其超链接到指定的 URL

我已经考虑过 z-index 但不确定如何使用它，尤其是如何计算我的新分层图像的确切尺寸。

是否有工具可以计算重叠徽标所需的四个点？

Answer 1

我建议您只将图像作为链接，但如果不能，您可以绝对在其上放置一个链接：

.header             { position:relative; }
.header .bannerLink { position:absolute; top:0; left:0; 
                      width:100px, height:100px; display:block; }

——

<div class="header">
  <img src="banner.jpg" />
  <a href="index.php" class="bannerLink"><span>Click Me</span></a>
</div>

Answer 2

你看过图像地图吗？

http://www.w3schools.com/TAGS/tag_map.asp

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>