背景图片上的链接

Question

我想在背景图片上使用链接（请参阅示例this Github issue）。如何添加链接到该图片的部分（例如形状），因为文本“Link1”和“Link 2”表示？

Answer 1

你无法做到这一点，但有几种方法间接地做到这一点：

1。您可以单独使用图片。

2。在图像上放置一个div，其索引低于图像

.getclick_link1 {
      /* Get the position and width of Link1 with F12 in Chrome */
      z-index : <put a z-index for the image> - 1;
      width : <the width of Link1> ;
      height : <the height of Link1>;
      position : absolute;
      left : <Get the left position of Link1 in the image>;
      top : <Get the top position of Link1 in the image>;
}

在JQuery中执行此操作：

$(function(){
    $(".getclick_link1").click(function() {
        window.location = "The address you like to redirect"
    });
});

Answer 2

图像地图不适用于背景图像。如果您仍想使用背景图像，可以将透明图像绝对放在背景图像上并锚定它们。为绝对定位的透明图像提供更高的z-index，以便可以单击。