我有一张最大宽度为 1200 像素、相对宽度为 85% 的图片。 在这张图片之上我还有一张，它是第一张图片的一小部分。我想将第二个用作链接，这就是为什么我将其从第一个中删除并放在顶部的原因。
我使用绝对值进行定位，但无论我如何调整这些值，在调整视口(viewport)大小时它只适合一个特定点。
我想在随附的代码中使用图像的多个部分作为链接(有点像菜单)——为简单起见——只有一个图像作为链接。
我正在尝试做某事 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>最佳答案
我找到了 SVG 的解决方案。在 Adobe Illustrator(或任何其他矢量软件)中，我将图像保存为 .svg。 在 .svg 文件中，我在要用作热点链接的图像部分上绘制了矢量路径。保存后，当我在文本编辑器中打开 .svg 文件时，图像标签下方有一个路径标签，它定义图像上的“热点层”所在的位置。 svg 的整个 xml 代码可以从 svg 文件复制到 HTML 中。下面的例子。 我真的不是这方面的专家，也许代码中有不必要的东西，但这对我来说非常有效，svg-hotspot 随图像缩放并且可以使用 CSS 设置样式。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>svg mapping</title>
</head>
<body>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-359 46.36 480 308.64" style="enable-background:new -359 46.36 480 308.64;" xml:space="preserve">
<image style="overflow:visible;enable-background:new ;" width="2000" height="1288" xlink:href="yourImage.jpg" transform="matrix(0.24 0 0 0.2396 -359 46.36)">
</image>
<a xlink:href="https://www.yoursite.com">
<path style="opacity:0;fill:#FFFFFF;" d="M-35.042,281.926c0,0,6.346,1.664,8.53-0.936s0.312-12.067,1.456-18.308
c1.144-6.241,6.45-20.181,10.506-22.261c4.057-2.08,6.241-3.849,8.53-3.849s5.825-0.104,7.282-1.664
c1.456-1.56,3.641-4.889,2.08-8.01s-2.08-8.114-5.201-8.842c-3.121-0.728-3.121-0.728-3.121-0.728s-3.953,1.04-5.305,0
c-1.352-1.04-14.459-16.228-24.03-14.563s-17.684,2.08-20.909,9.674c-3.225,7.594-2.393,11.339-0.936,16.956
c1.456,5.617,2.601,12.795,1.352,15.812c-1.248,3.017-4.057,12.483-1.248,17.684C-53.246,268.09-51.582,276.204-35.042,281.926z"/>
</a>
</svg>
</body>
</html>
关于html - 使用 CSS 定位 2 个相关图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31788445/