Question

我有一张最大宽度为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>

Answer 1

我找到了一个SVG的解决方案。在Adobe Illustrator（或任何其他矢量软件）中，我将图像保存为.svg。在.svg文件中，我在要用作热点链接的图像部分绘制了一个矢量路径。保存之后，当我在文本编辑器中打开.svg文件时，在image-tag下面有一个path-tag，它定义了图像上的“hotspot-layer”。可以将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>

使用CSS定位2个相对图像

1 个答案: