我使用图像地图工具制作了5个矩形框,但实际上它们不是真正的矩形框,而是要变为<input type=text style="position:absolute; left: ??px; top: ??px; width:??px; height:??px;" />且具有正确的左,上,宽,高

html - 如何从坐标获取CSS的左,上,宽,高?-LMLPHP

图像地图工具:

https://developer.cdn.mozilla.net/media/uploads/demos/s/u/summerstyle/365ccfd644f2b008c33f0046d2ba1a8f/summer-html-image-ma_1355318513_demo_package/index.html

生成的代码:

<img src="a.png" alt="" usemap="#map" />
<map name="map">
    <area shape="rect" coords="961, 542, 1269, 611" />
    <area shape="rect" coords="245, 300, 606, 340" />
    <area shape="rect" coords="245, 247, 605, 286" />
    <area shape="rect" coords="245, 194, 605, 234" />
    <area shape="rect" coords="246, 142, 606, 183" />
</map>


如何将生成的坐标转换为CSS的左,上,宽,高?

最佳答案

您具有<area>坐标x1y1x2y2

这些相对于图像的左上角,我们可以假设它们也将是<div>的左上角,其中将包含您的<input>元素x1left并且y1top

<div>应具有position: relative,而<input>应具有position: absolute

另外,由于您似乎需要将它们正确对齐,因此可以忽略x1值,而只需设置right: 0,然后只需要top值即可。

这似乎是一种奇怪的布局方法,而不是使用常规流程。

10-02 14:26