背景图片上的链接答案

【问题标题】：Links on background picture背景图片上的链接
【发布时间】：2015-09-27 20:14:47
【问题描述】：

我想在背景图片上使用链接（参见示例http://goo.gl/GfkD6M）。如文本“Link1”和“Link 2”所示，如何添加指向该图片部分（例如形状）的链接？

【问题讨论】：

您可以使用 HTML map 标记 (developer.mozilla.org/en-US/docs/Web/HTML/Element/map) 或将 div 放入带有背景图像的容器内并相应地定位它们...
map 标签如何适应 css 代码？ Sample
HTML 地图标签 ;) 所以它不在 CSS 中......（我不喜欢 w3fools，但看看这个带有可点击行星的小例子：@ 987654323@)
当然，但是当图像仅在 css 中引用时，我必须在哪里放置对地图的引用？
不知道 - 我更喜欢其他解决方案（正确定位图像上方的透明可点击元素......）无论如何......

标签： html css image hyperlink background

【解决方案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"
    });
});

【讨论】：

【解决方案2】：

图像映射不适用于背景图像。如果您仍想使用背景图像，您可以将透明图像绝对放置在背景图像之上并锚定它们。为绝对定位的透明图片赋予更高的 z-index，使其可点击。

【讨论】：