覆盖在IMG顶部的覆盖层在精确的位置答案

【问题标题】：Overlay Div On Top of Img at Precise Location覆盖在IMG顶部的覆盖层在精确的位置
【发布时间】：2014-05-12 01:12:17
【问题描述】：

我查看了其他帖子，但没有提到要覆盖的精确位置。

假设我有一张图片，例如。一个红绿灯。例如，我需要在绿灯的精确位置之上覆盖（不确定这是否是正确的术语）一个 div。这样我就可以通过 jQuery 为 div 设置动画以更改 div 的颜色，从而使图像具有动画效果。

现在的问题是如何做到精确，使 div 的位置与图像的那部分完全匹配？这是否意味着在设置 div 的顶部和左侧之前必须测量像素？还是有更聪明的方法？我考虑过其他选项，例如使用画布（或 svg 或 silverlight）重绘整个事物而不是嵌入图像（即重绘一个全新的交通灯图片）。但是，为此，我相信它会比我问的要复杂得多。如果我在这里错了，请纠正我。

请指教。

【问题讨论】：

是的，你可以这样做。
@jimmyweb，谢谢我的朋友，但你指的是哪一种方式？
我说的是 div over image
@jimmyweb，是的，我知道可以这样做。我的问题是关于将 div 放在 img 顶部的确切位置。这是为了防止在不同的浏览器和设备中查看时出现错位。如果 top 和 left 不能保证放置，那么上述替代方案是否明智？

标签： javascript jquery silverlight svg html5-canvas

【解决方案1】：

一种方法是将图像放在一个 div 中，如果您希望它与其他元素内联，则该 div 定位为相对位置，如果您想在页面上设置其位置，则该 div 定位为绝对位置。然后将重叠的 div 绝对定位在与图像相同的 div 内。

例如

样式

#holder {
    position:relative;
}

#over {
    position:absolute;
    width:40px;
    height:40px;
    left:20px;
    top:30px;
}

身体

<div id='holder'>
    <img src='IMAGE SOURCE'>
    <div id='over'></div>
</div>

您需要根据需要调整 id='over' 的 div 的宽度、高度、左侧和顶部。

您可以将 id='over' 的 div 替换为该图像上使用绝对位置的图像，并根据需要设置 left 和 top。

【讨论】：

谢谢，你的意思是精确定位还是需要手动调整/完成的，对吧？
是的，一点点系统性的试验和错误应该会让你得到你需要的值。
那么，基本上，其他替代方案（包括重新绘制所有内容）不太合适？
将基本交通信号灯图像编辑成各种灯组合并将这些不同的图像保存为 Tl1、TL2 等，例如是另一种可能性。这样所有图像都将具有相同的大小。然后预加载图像并根据需要交换显示图像的 src 是另一种选择。
在这种情况下，它仍然归结为手动设置这些“热点”的顶部和左侧。无论如何，欣赏你的另类观点。