在精确位置Img顶部覆盖div

我已检查其他帖子，但没有提到关于精确位置的覆盖图。在精确位置Img顶部覆盖div

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

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

请指教。

来源

2014-04-01 Jason

是的，你可以这样做。 – lukaleli

@ jimmyweb，谢谢我的朋友，但你指的是哪种方式？ – Jason

我在说div over image – lukaleli

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

您可以使用图片使用位置绝对值替换id ='over'的div，并根据需要设置左侧和顶部。

来源

2014-04-01 12:01:33 jing3142

谢谢，你的意思是精确定位仍然需要手动调整/完成，对吧？ – Jason

是的，有点系统的试验和错误应该为你提供你需要的值。 – jing3142

好吧，我想我们不能懒惰。 – Jason

在精确位置Img顶部覆盖div

回答

相关问题