오버레이 사업부 정확한 위치의 Img 상단에

Question

다른 게시물을 확인했지만 오버레이 할 정확한 위치에 대해서는 언급하지 않았습니다.

예를 들어 이미지가 있다고 가정하십시오. 교통 신호등. 예를 들어, 녹색 램프의 정확한 위치 위에 div를 겹쳐서 표시해야합니다 (올바른 용어인지 아닌지 확실하지 않음). 이것은 jQuery를 통해 div에 애니메이션을 적용하여 이미지의 애니메이션 효과를 얻기 위해 div의 색상을 변경할 수 있도록하기 위해서입니다.

이제 div의 위치가 이미지의 해당 부분과 완전히 일치하도록 문제가 정확합니까? div의 상단과 왼쪽을 설정하기 전에 픽셀을 측정해야한다는 의미입니까? 아니면 똑똑한 방법이 있습니까? 캔버스 (또는 svg 또는 실버 라이트)를 사용하여 이미지를 포함하는 대신 모든 것을 다시 그리는 것과 같은 다른 옵션을 고려했습니다. 즉, 완전히 새로운 교통 신호등 그림을 다시 그립니다. 그러나, 나는 이것이 내가 요구 한 것보다 더 복잡 할 것이라고 믿는다. 내가 틀렸다면 나를 바로 잡아라.

알려 주시기 바랍니다.

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> 

당신은 필요 '를 통해'= ID로 사업부의 폭, 높이, 왼쪽 상단을 조정해야합니다 .

div를 id = 'over'로 대체 할 수 있으며이 이미지에서 이미지 사용 위치 절대 값을 사용하고 필요에 따라 왼쪽과 위쪽을 설정할 수 있습니다.