【发布时间】：2015-08-03 13:20:42
【问题描述】：
我有一张最大宽度为 1200 像素、相对宽度为 85% 的图片。 在这张照片的顶部，我还有一张，它是第一张照片的一小部分。我想将第二个用作链接，这就是为什么我将它从第一个中剪下来并放在顶部。
我使用绝对值进行定位，但是我调整了这些值，它只适合调整视口大小时的一个特定点。
我想在随附的代码中使用图像的几个部分作为链接（有点像菜单） - 为简单起见 - 只有一个图像作为链接。
我正在尝试做一些事情like this，但使用可调整大小的图像。
我的代码在下面，这就是现在图像的样子：Link with the images
非常感谢任何帮助！非常感谢！
body {
width: 100%;
background: black;
}
div#bgrImg { /* div with the background image */
max-width: 1200px;
width: 85%;
/* margin: 5% auto 0 auto; */
position: absolute;
left: 7.5%;
top: 8.3%;
}
#bgrImg img { /* the background image */
width: 100%;
}
div#signLink { /* div with the sign image */
max-width: 1200px;
width: 85%;
position: absolute;
left: 7.5%;
top: 26%;
}
#signLink img { /* the sign image */
width: 22%;
position:absolute;
left: 51.5%;
}
#signLink:hover {
cursor: pointer;
}<html>
<body>
<div id="bgrImg">
<img src="_images/hillBgr.jpg" />
</div>
<div id="signLink">
<a href="index.htm"><img src="_images/hillSign.png"/></a>
</div>
</body>
</html>【问题讨论】：
-
您可能需要为此查看
<map>和<area>。 - developer.mozilla.org/en-US/docs/Web/HTML/Element/area -
您无需使用现有图像的剪切图即可将其用作链接；而是使用上面评论中引用的地图。更多相关信息：stackoverflow.com/questions/1778589/…（不要因为标题冲突就说这个链接跑题了，而是要花时间阅读它）
-
非常感谢，但是在阅读了建议的文章后，我认为这对我来说不是正确的解决方案，因为 不能使用 CSS 设置样式。我需要对这些区域进行样式设置，例如悬停效果...我读到 svg 可能是一个解决方案，但我不知道从哪里开始...再次，任何建议将不胜感激！谢谢！