Html 屏蔽背景图片，使其根据单击的位置链接到不同的页面

我正在创建一个网站，因为我对html有点陌生，我希望我的所有主页都是一张背景图片，占据整个页面-上面有两个徽标-如果单击每个徽标，就会将您指向相应的页面

我知道你可以用方框/圆圈/多边形遮罩图片，然后点击图片的某个特定部分以转到链接，而其他部分则用于其他链接，如本教程所示：

问题是，这需要您使用标记将图片放入，我使用css代码来完成，因此我可以将其用作背景图像：

<style type="text/css"> html { background: url('wp-content/uploads/2013/07/main_menuu-1024x1024.jpg') no-repeat center center fixed; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; } </style>

html{background:url（'wp-content/uploads/2013/07/main_menuu-1024x1024.jpg'）无重复中心已修复；-webkit背景大小：包含；-moz背景大小：包含；-o-background-size:包含；背景大小：包含；}

…我喜欢[contain]属性，因为它会自动调整所有视图和设备中的图像大小，所以有解决方法吗

提前谢谢

更新：

我的一个编程朋友告诉我“使用锚/显示块/绝对位置” 使用左侧%、顶部%和宽度高度% 对 你是个混蛋 并使用绝对定位锚 废话“

---

但他对此并不十分清楚。

杰夫和罗布努斯是对的

如果你真的想要这样的东西，我建议你设置你的背景图像。并设置一个

div

，其中包含一个链接

这里有一个例子

---

使用这种结构，你可以根据需要在页面上放置链接。

图像地图是一个非常糟糕的主意-它被称为mystrey meat navigation，因为用户不知道在哪里单击，所以他们必须去寻找链接并注意鼠标指针。正如Jeff所说，这是一种非常糟糕的方法。你想要完成的应该是多个HTML元素，而不仅仅是一个背景。听起来像是朋友在谈论如何定位徽标。您可能应该研究的问题是如何按照您想要的方式定位徽标。正如您的朋友所说，它们应该是自己的HTML元素。