html로 이미지 위에 텍스트를 삽입하는 방법은 무엇입니까?

Question

이미지 위에 텍스트를 삽입하는 방법. 아래 코드를 입력 할 때마다 텍스트가 이미지 아래에 표시됩니다.

<img src="example.jpg">Text</img> 

Answer 1

<img> element is empty - 종료 태그가 없습니다.

이미지가 a background image, use CSS 인 경우 콘텐츠 이미지 인 경우 컨테이너에 position: relative을 설정 한 다음 absolutely position 이미지 및/또는 텍스트를 설정합니다.

Answer 2

상대적으로 위치가 지정된 img 태그 위에 절대 배치 된 CSS를 사용해야합니다. 문서 Text Blocks Over Image은 이미지 위에 텍스트를 배치하는 단계별 예제를 제공합니다.

Answer 3

div와 같은 크기로 이미지를 만들 수 있습니다.

<div class="imageContainer">Some Text</div> 

이미지

.imageContainer { 
     width:200px; 
     height:200px; 
     background-image: url(locationoftheimage); 
} 

에게

more here

메모를 보여주기 위해 CSS 배경 이미지 속성을 사용 :이 slichtly 문서의 의미를을 조작하는. 필요한 경우 javascript를 사용하여 div를 실제 이미지 대신 삽입하십시오. 당신이 시도 할 수

Answer 4

... 부적절한 HTML입니다

<div class="image"> 

     <img src="" alt="" /> 

     <h2>Text you want to display over the image</h2> 

</div> 

CSS

.image { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
} 

h2 { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
}