将照片的一部分链接到另一个HTML页面

Question

我想在html页面上链接照片的一部分，以重定向到我正在制作的另一个html页面。 最简单的方法是什么？

<div class="large-8 columns">
    <div style="background-image: url('../BackgroundGrid.png')>
        <div class="layer-wrapper">
            ...
        </div>
    </div>
</div>

因此，将BackgroundGrid图像的一角重定向到单独的html页面。 有任何想法吗？

Answer 1

您可以创建一个透明的

<a href="http://google.com" target="_blank"> 

用css以这种方式在您照片的顶部（例如，您希望上半部分可单击并链接到google）：

.parent-wrapper{
  position: relative;
}

.photo-click-area {
   position: absoulte;
   top: 0;
   left: 0;
   height: 50%;
   background: transparent;
   display: block;
   cursor: pointer;
   z-index: 9;
}

因此您的代码可能如下所示：

<div class="large-8 columns parent-wrapper">
    <a class="photo-click-area" href="http://google.com" target="_blank" />
    <div style="background-image: url('../BackgroundGrid.png')>
        <div class="layer-wrapper">
            ...
        </div>
    </div>
</div>