將照片的一部分鏈接到另一個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的頂部

（說你想要的一半上部件可以點擊並鏈接到谷歌）：

.parent-wrapper{ 
    position: relative; 
} 

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

所以你的代碼可能看起來像這樣：