javascript - Z-index 透明图像

Question

我需要使用现有的横幅图片，作为图片的一部分，图片左侧有一个公司 Logo ，但整个横幅是一张图片。

现在我所追求的是一种在现有图像 Logo 上创建图层区域(透明/不可见)的方法，以便:

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

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

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

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>