HTML의 한 이미지에 여러 이미지를 표시하는 방법

HTML을 사용하고 하나의 큰 이미지를 표시하고 싶습니다. 이 커다란 이미지 위에서 저는 여러 개의 작은 이미지를 다른 장소와 크기로 표시하고 싶습니다.HTML의 한 이미지에 여러 이미지를 표시하는 방법

나는 HTML만을 사용하여 이것을 선호한다. 하지만 이것이 불가능할 경우 Javascript 또는 이와 유사한 것도 옵션입니다. :-) PHP를 사용하는 사람이 누구나 있다면, 그 또한 좋을 것입니다.

웹 검색과 StackOverflow를 사용하여 가능한 해결책을 많이 시도했지만 어느 것도 큰 이미지를 표시 할 수 없었으며이 큰 이미지 위에 다른 여러 이미지를 표시 할 수 없었습니다.

도움을 주시면 감사하겠습니다.

종류와 관련, 마이클

2012-11-23 MichaelP

당신이 CSS와 Z- 인덱스 + 절대 위치를 시도? –

문제가 해결되면 답장 중 하나를 답으로 표시하십시오. 응답에 해당하는 눈금. – Nitish

당신이 순수한 HTML에 다른 이미지를 통해 이미지를 오버레이하지만, 무엇 당신이 할 수있는 다른 태그에 이미지의 위치를 다시 찾아 단지 CSS로 적절하게 이동할 수 없습니다.

2012-11-23 20:50:44

CSS가 "순수한"html이 아니라고 제안 하시겠습니까? 절대 위치 지정은 아무런 문제가되지 않습니다. – jtheman

좋아, 나쁘다, CSS + HTML을 한 가지로 포함하고 있었지만, 일단 CSS를 사용하면 HTML이 아닌 –

두 대안 : 배경 CSS를 사용하여로 큰 이미지를 정의

는, 당신은 당신이 원하는 HTML 마크 업 그것에 넣을 수 있습니다. 이러한 backgorund는 전체 페이지뿐만 아니라 div과 같은 요소에 대해서도 선언 할 수 있습니다.
스타일 정의 내에서 절대 위치 지정을 사용하십시오. 이렇게하면 크고 작은 이미지를 마크 업에 추가 한 다음 서로 위에 배치 할 수 있습니다.

자바 스크립트가 필요하지 않으며 php와 관련이 없습니다. 나는이 JSFiddle에서했던 것처럼

2012-11-23 20:52:26 arkascha

당신이 그들을 배치 할 수 있습니다 : http://jsfiddle.net/xxUpk/

top:-NNNpx 원유, 당신은 그 위치의 float 및 기타 여러 가지 방법을 사용할 수 있습니다. 또한 레이어를 보려면 z-index을 조사하십시오.

2012-11-23 20:53:17

작은 이미지를 모두 포함하는 컨테이너 div를 사용할 수 있습니다. 특정 div의 배경을 설정할 수 있습니다.

<div id="container"> 

</div>

와 CSS를 다음과 같은 같은 HTML :

div#container{ 

     background-image: url("image.jpg"); 
     background-repeat:no-repeat; 
     height:100%; 
    }

2012-11-23 20:53:29 Nitish

답변