在精確位置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

回答

相關問題