Question

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

考虑我有一个图像，例如。红绿灯。我需要覆盖（不确定这是否是正确的术语）例如，在绿色灯的精确位置之上的div。这样我就可以通过jQuery为div设置动画来改变div的颜色，以便产生图像动画效果。

现在的问题是如何准确地说明这一点，以便div的位置完全匹配图像的那部分？这是否意味着必须在设置div的顶部和左侧之前测量像素？或者有更聪明的方法吗？我已经考虑过其他选项，例如使用canvas（或svg或silverlight）来重绘整个事物而不是嵌入图像（即重新绘制一个全新的交通灯图片）。但是，对于这一点，我相信它会比我提出的要复杂得多。如果我在这里错了，请纠正我。

请告知。

Answer 1

一种方法是将图像放在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>

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

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

在精确的位置叠加在Img顶部的Div

1 个答案: